Android技术分享| Activity 过渡动画 — 让切换更加炫酷

anyRTC 2023-03-28 原文

介绍

在 android5.0 以上版本中，google 为我们提供了几种 activity 切换的过渡动画，目的是为了让 activity 切换转场更加美观，而在 android5.0 之前的 activity 切换显得生硬。虽然可以自定义给 activity 增添动画效果，但是效果也不尽如意。而 androi5.x 提供的切换动画就显得非常自然，而且容易使用。

现在我们来看看 androi5.x 提供的动画效果图：

Activity过渡动画

在 androi5.x 中，为 activity 提供了三中动画效果，分别是：

explode（分解）
slide（滑进滑出）
fade（淡入淡出）

这三种都是 activity 的切换动画效果，除了这三种以外，我们看如上动态图中的　“共享元素”　，它其实也是一种转场动画，只不过这种需要一定的条件才能够使用。比如： activity1 和 activity2 中有两个一模一样的内容，从 activity1 跳转到 activity2 时我们才运用共享元素的动画效果，达到更加的 ui 体验。

下面我们来具体学习和实现一下这几种过渡动画。

一、explode（分解）

效果图：

explode 从屏幕中间进或者出，然后将视图移动至最后位置，达到动画的效果。

二、slide（滑动）

效果图：

slide 是从屏幕边缘进出，同理通过移动视图形成动画。

三、fade（淡入淡出）

效果图：

fade 则是通过改变视图的透明度来达到动画效果。

如何使用

我们知道开启一个 activity 只需 startActivity(); 即可，更多的是，我们要想加入过渡动画，也只需要在 startActivity(); 中传入需要的参数即可。

第一步：

例如，我要从 MainActivity 中启动 AnimationActivity，只需要在 MainActivity 中 startActivity(); 传入参数即可，代码如下：

startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

第二步：

在 AnimationActivity 中的 setContentView(); 方法前加入一行代码：

//在需要启动的 activity 中开启动画的特征
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

或者，在 AnimationActivity 中设置如下 style，并引用到 AnimationActivity 即可。

 <item name="android:windowContentTransitions">true</item>

第三步：

在 AnimationActivity 中设置要应用的动画效果，如上面介绍的，效果有三种。然后选择任意一种即可，代码如下：

getWindow().setEnterTransition(new Explode());
getWindow().setEnterTransition(new Slide());
getWindow().setEnterTransition(new Fade());

上面设置的是进入 activity 的动画，也可以设置退出 activity 的动画，代码如下：

getWindow().setExitTransition(new Explode());
getWindow().setExitTransition(new Slide());
getWindow().setExitTransition(new Fade());

共享元素动画效果

通过上面这三个步骤，我相信你一定可以实现简单的 activity 过渡动画了，然后接下来介绍的是 activity 共享元素的动画效果，这里会稍微难一点。我就拿我的例子一部分来举例子，这样显得更加容易理解。

例如，我的例子中两个页面都有一个同样内容的 textview ，所以要使其得到共享。

  <!-- 共享元素必须添加　transitionName　属性，且对应的元素 name　值一致 -->
    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/tv_shared_element"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginTop="56dp"
        android:layout_marginBottom="72dp"
        android:gravity="center_horizontal"
        android:text="@string/app_txt"
        android:textColor="#323232"
        android:textSize="18sp"
        android:transitionName="shared element"
        tools:ignore="UnusedAttribute" />

注意：我们必须为两个页面的共同元素（textview）设置一个属性：

android:transitionName="shared element"

并且必须保证两个 textview 的　transitionName 设置的内容一致，否者将无法达到共享元素的动画效果。

最后的关键一步：更改 startActivity(); 参数内容，因为我们设定了共享元素，所以到进行指定，这样 startActivity 时才能够找到目标，所以启动 activity 的代码因改为这样：

//这里的　sharedElementName 必须与 xml 文件中设置的值一致，否则无法共享
// tvSharedElement 表示要参与共享的　view
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this, tvSharedElement,
      "shared element").toBundle());

如果你的两个 activity 中有两个及以上的内容需要共享元素动画时，你只需要修改代码为：

        startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this,
                Pair.create((View) tvSharedElement, "shared element"))
                .toBundle());

这里通过 Pair.create(view，"shared name")；来传入需要共享的元素。

好了，本篇关于 android5.x 提供的几种过渡动画效果就展示完了，虽然过渡动画效果很漂亮，但是也要合理的运用，也不能每一个 activity 都设置过渡动画。那么，如上动态图演示的一样，本案例关键代码将在下面贴出：

案例代码

ＭainActivity 代码如下：

package com.xww.activityanims;
 
import android.annotation.SuppressLint;
import android.app.ActivityOptions;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.AppCompatButton;
import android.support.v7.widget.AppCompatTextView;
import android.util.Pair;
import android.view.View;
 
import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;
 
@SuppressLint("NewApi")
public class MainActivity extends AppCompatActivity {
 
    @BindView(R.id.btn_explode)
    AppCompatButton btnExplode;
    @BindView(R.id.btn_slide)
    AppCompatButton btnSlide;
    @BindView(R.id.btn_fade)
    AppCompatButton btnFade;
    @BindView(R.id.tv_shared_element)
    AppCompatTextView tvSharedElement;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
    }
 
    @OnClick(R.id.btn_explode)
    void onExplodeClick() {
        Intent intent = new Intent(this, AnimationsActivity.class);
        startActivityWithAnimation(intent, "explode");
    }
 
    @OnClick(R.id.btn_slide)
    void onSlideClick() {
        Intent intent = new Intent(this, AnimationsActivity.class);
        startActivityWithAnimation(intent, "slide");
    }
 
    @OnClick(R.id.btn_fade)
    void onFadeClick() {
        Intent intent = new Intent(this, AnimationsActivity.class);
        startActivityWithAnimation(intent, "fade");
    }
 
    private void startActivityWithAnimation(Intent intent, String animType) {
        intent.putExtra("anim", animType);
        //这里的　sharedElementName 必须与 xml 文件中设置的值一致，否则无法共享
        // tvSharedElement 表示要参与共享的　view
//        startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this, tvSharedElement,
//                "shared element").toBundle());
        startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this,
                Pair.create((View) tvSharedElement, "shared element"))
                .toBundle());
    }
}

接着是 AnimationsActivity 的代码，这是一个开启动画的 Activity ，代码如下：

package com.xww.activityanims;
 
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.AppCompatTextView;
import android.transition.Explode;
import android.transition.Fade;
import android.transition.Slide;
import android.view.Window;
 
import butterknife.BindView;
import butterknife.ButterKnife;
 
@SuppressLint("NewApi")
public class AnimationsActivity extends AppCompatActivity {
 
    @BindView(R.id.tv_anim_type)
    AppCompatTextView tvAnimType;
 
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //在需要启动的 activity 中开启动画的特征
        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
 
        setContentView(R.layout.activity_animations);
        ButterKnife.bind(this);
 
        setEnterAnim();
    }
 
    @SuppressWarnings("ConstantConditions")
    private void setEnterAnim() {
        final String animType = (String) getIntent().getExtras().get("anim");
        tvAnimType.setText(animType);
 
        switch (animType) {
            case "explode":
                getWindow().setEnterTransition(new Explode());
                break;
            case "slide":
                getWindow().setEnterTransition(new Slide());
                break;
            case "fade":
                getWindow().setEnterTransition(new Fade());
                break;
        }
    }
}

AnimationsActivity 布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <android.support.v7.widget.ContentFrameLayout
        android:id="@+id/frame"
        android:layout_width="match_parent"
        android:layout_height="280dp"
        android:background="#ff3312">
 
        <android.support.v7.widget.AppCompatTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="https://blog.csdn.net/smile_Running"
            android:textColor="#ffffff"
            android:textSize="20sp"
            tools:ignore="HardcodedText" />
 
    </android.support.v7.widget.ContentFrameLayout>
 
    <!-- anchor 属性必须在 CoordinatorLayout 下一级才能生效 -->
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_person_add_black_24dp"
        app:elevation="8dp"
        app:layout_anchor="@id/frame"
        app:layout_anchorGravity="bottom|right" />
 
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_sentiment_satisfied_black_24dp"
        app:elevation="8dp"
        app:layout_anchor="@id/frame"
        app:layout_anchorGravity="bottom|left" />
 
    <android.support.v7.widget.CardView
        android:layout_width="220dp"
        android:layout_height="120dp"
        app:cardBackgroundColor="#ffdd55"
        app:cardCornerRadius="24dp"
        app:cardElevation="8dp"
        app:layout_anchor="@id/frame"
        app:layout_anchorGravity="bottom|center_horizontal">
 
        <android.support.v7.widget.AppCompatTextView
            android:id="@+id/tv_anim_type"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="animations"
            android:textColor="#ffffff"
            android:textSize="25sp"
            tools:ignore="HardcodedText" />
    </android.support.v7.widget.CardView>
 
    <android.support.v7.widget.AppCompatTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginBottom="72dp"
        android:gravity="center_horizontal"
        android:text="@string/app_txt"
        android:textColor="#323232"
        android:textSize="18sp"
        android:transitionName="shared element"
        tools:ignore="UnusedAttribute" />
</android.support.design.widget.CoordinatorLayout>

让我们的 Activity 的切换更加炫酷起来吧！

过渡 Activity quot android layout 动画效果移动开发音视频Android

有关Android技术分享| Activity 过渡动画 — 让切换更加炫酷的更多相关文章

ruby-on-rails - Ruby on Rails with Haml - 如何从 erb 切换 - 2
我正在从erb文件切换到HAML。我将hamlgem添加到我的系统中。我创建了app/views/layouts/application.html.haml文件。我应该只删除application.html.erb文件吗？此外，仍然有/public/index.html文件被呈现为默认页面。我想创建自己的默认index.html.haml页面。我应该把它放在哪里以及如何使系统呈现该文件而不是默认索引文件？谢谢! 最佳答案是的，您可以删除任何已转换为HAML的View的ERB版本。至于你的另一个问题，删除public/index/h
Unity 热更新技术 | （三） Lua语言基本介绍及下载安装 - 2
?博客主页：https://xiaoy.blog.csdn.net?本文由呆呆敲代码的小Y原创，首发于CSDN??学习专栏推荐：Unity系统学习专栏?游戏制作专栏推荐：游戏制作?Unity实战100例专栏推荐：Unity实战100例教程?欢迎点赞?收藏⭐留言?如有错误敬请指正！?未来很长，值得我们全力奔赴更美好的生活✨------------------❤️分割线❤️-------------------------
Unity 3D 制作开关门动画,旋转门制作,推拉门制作,门把手动画制作 - 2
Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u
MIMO-OFDM无线通信技术及MATLAB实现（1）无线信道：传播和衰落 - 2
MIMO技术的优缺点优点通过下面三个增益来总体概括：阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下，MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中，可以获得复用增益，即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中，可以获得分集增益，即可靠性性能的改善。分集增益用独立衰落支路数来描述，即分集指数。在使用了空时编码的MIMO系统中，由于接收天线或发射天线之间的间距较远，可认为它们各自的大尺度衰落是相互独立的，因此分布式MIMO
安卓apk修改(Android反编译apk) - 2
最近因为项目需要，需要将Android手机系统自带的某个系统软件反编译并更改里面某个资源，并重新打包，签名生成新的自定义的apk，下面我来介绍一下我的实现过程。APK修改，分为以下几步：反编译解包,修改,重打包,修改签名等步骤。安卓apk修改准备工作1.系统配置好JavaJDK环境变量2.需要root权限的手机（针对系统自带apk,其他软件免root）3.Auto-Sign签名工具4.apktool工具安卓apk修改开始反编译本文拿Android系统里面的Settings.apk做demo,具体如何将apk获取出来在此就不过多介绍了，直接进入主题：按键win+R输入cmd，打开命令窗口，并将路
ruby-on-rails - 用于门户的 Ruby 技术 - 2
我刚刚看到whitehouse.gov正在使用drupal作为CMS和门户技术。drupal的优点之一似乎是很容易添加插件，而且编程最少，即重新发明轮子最少。这实际上正是Ruby-on-Rails的DRY理念。所以:drupal的缺点是什么？Rails或其他基于Ruby的技术有哪些不符合whitehouse.org(或其他CMS门户)门户技术的资格？最佳答案 Whatarethedrawbacksofdrupal?对于Ruby和Rails，这确实是一个相当主观的问题。Drupal是一个可靠的内容管理选项，非常适合面向社区的站点。它
iNFTnews | 周杰伦18年前未发布的作品Demo，藏在了区块链技术里 - 2
当音乐碰上区块链技术，会擦出怎样的火花？或许周杰伦已经给了我们答案。8月29日下午，B站独家首发周杰伦限定珍藏Demo独家访谈VCR，周杰伦在VCR里分享了《晴天》《青花瓷》《搁浅》《爱在西元前》四首经典歌曲Demo背后的创作故事，并首次公布18年前未发布的神秘作品《纽约地铁》的Demo。在VCR中，方文山和杰威尔音乐提及到“多亏了区块链技术，现在我们可以将这些Demos，变成独一无二具有收藏价值的艺术品，这些Demos可以在薄盒（国内数藏平台）上听到。”如何将音乐与区块链技术相结合，薄盒方面称：“薄盒作为区块链技术服务方，打破传统对于区块链技术只能作为数字收藏的理解。聚焦于区块链技术赋能，在
LVGL V8动画 - 2
动画/*INITIALIZEANANIMATION 初始化一个动画*-----------------------*/lv_anim_ta;lv_anim_init(&a);/*MANDATORYSETTINGS 必选设置*------------------*//*Setthe"animator"function 设置“动画”功能*/lv_anim_set_exec_cb(&a,(lv_anim_exec_xcb_t)lv_obj_set_x);/*Setthe"animator"function*/lv_anim_set_var(&a,obj);/*Lengthoftheanim
ruby-on-rails - 语言环境不在 Rails 4 中切换 - 2
我的Rails应用程序在rails4.0.2上，我在使用locale变量和params[:locale]切换翻译时遇到问题官方railsguide.我在mysite有一个单页网站.我的国际化路线:scope"(:locale)",locale:/en|de/do#myrouteshereend我的应用程序Controllerbefore_filter:set_localedefset_localeI18n.locale=params[:locale]||I18n.default_locale#Rails.application.routes.default_url_options[:l
jquery - 在 Rails 中从原型(prototype)切换到 jquery，助手呢？ - 2
我目前从prototype切换到jquery主要是为了支持简单的ajax文件上传。我使用:https://github.com/indirect/jquery-rails95%的javascript代码是由railshelper编写的，例如:-remote_function-render:updatedo|page|-page.replace_html'id',:partial=>'content'-page['form']['name']=something-page.visual_effect:highlight,'head_success'...我知道我必须为Jquery重写5%

Android技术分享| Activity 过渡动画 — 让切换更加炫酷

介绍

Activity过渡动画

一、explode（分解）

二、slide（滑动）

三、fade（淡入淡出）

如何使用

共享元素动画效果

案例代码

有关Android技术分享| Activity 过渡动画 — 让切换更加炫酷的更多相关文章

随机推荐