Activity 过渡动画 — 让切换更加炫酷
博主声明:
转载请在开头附加本文链接及作者信息,并标记为转载。本文由博主 威威喵 原创,请多支持与指教。
本文首发于此 博主:威威喵 | 博客主页:https://blog.csdn.net/smile_running
介绍
在 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.AppCompatTextViewandroid: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 都设置过渡动画。那么,如上动态图演示的一样,本案例关键代码将在下面贴出:
案例代码
MainActivity 代码如下:
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;@Overrideprotected 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());}
}
MainActivity 布局文件我就不贴出来了,就三个 Button 和一个 TextView,最后我会给出本案例完整代码的资源链接,大家若不懂可以去下载来参考。
接着是 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;@Overrideprotected 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.ContentFrameLayoutandroid:id="@+id/frame"android:layout_width="match_parent"android:layout_height="280dp"android:background="#ff3312"><android.support.v7.widget.AppCompatTextViewandroid: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.FloatingActionButtonandroid: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.FloatingActionButtonandroid: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.CardViewandroid: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.AppCompatTextViewandroid: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.AppCompatTextViewandroid: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 过渡动画 — 让切换更加炫酷相关推荐
- Activity-过渡动画-—-让切换更加炫酷,网易严选Android开发三面面经
例如,我要从 MainActivity 中启动 AnimationActivity,只需要在 MainActivity 中 startActivity(); 传入参数即可,代码如下: startAct ...
- html css图片展开动画,8个实用炫酷的HTML5图片动画应用
本文作者html5tricks,转载请注明出处 近期我们发布了不少关于 1.CSS3/jQuery实现移动端滑动图片层叠效果 这是一款基于jQuery和CSS3的图片层叠插件,这和我们之前介绍的CSS ...
- Android——浅析Activity过渡动画
Activity过渡动画 前言 分解动画 效果视频 解析 滑动动画 效果视频 解析 淡出动画 效果视频 解析 共享元素 共享单个元素 效果视频 解析 共享多个元素 效果视频 全部代码 第一个Activ ...
- android 应用切换动画,怎么在Android应用中利用Activity对动画进行切换
怎么在Android应用中利用Activity对动画进行切换 发布时间:2020-11-27 16:19:53 来源:亿速云 阅读:107 作者:Leah 今天就跟大家聊聊有关怎么在Android应用 ...
- android 页面过渡动画,Activity过渡动画的实现方法
1.使用overridePendingTransition方法实现Activity跳转动画 overridePendingTransition方法是Activity中提供的Activity跳转动画方法 ...
- 安卓 activity过渡动画
Activity过渡的五中实现 1.使用overridePendingTransition方法实现Activity跳转动画 overridePendingTransition方法是Activity中 ...
- Activity过渡动画
Android5.0之前我们一般会使用overridePendingtransition(int inId, int outId)来给Activity增加一些切换动画,但效果差强人意.Android5 ...
- android svg动画框架,Android实现炫酷SVG动画效果
svg是目前十分流行的图像文件格式了,svg严格来说应该是一种开放标准的矢量图形语言,使用svg格式我们可以直接用代码来描绘图像,可以用任何文字处理工具打开svg图像,通过改变部分代码来使图像具有交互 ...
- android 天气动画,为app制作炫酷天气动画 – WeatherView
WeatherView 从1.1.0版本开始这个库使用了一个不同的setter结构. WeatherView是一个为app制作一个炫酷天气动画的Android库. Setup Android Stud ...
- Android 炫酷动画APP,21 款炫酷动画开源框架,照亮你的APP
原标题:21 款炫酷动画开源框架,照亮你的APP 2017年安卓巴士全球开发者论坛-上海站 前言 最近对应用的UI视觉效果突然来了兴致,所以找了一些合适开源控件,这样更加省时,再此分享给大家,希望能对 ...
最新文章
- Go 学习笔记(1)— Ubuntu 系统 Go 环境搭建、VS Code 配置 Go 开发环境、VS Code 远程开发配置
- 2021全国高校计算机能力挑战赛(决赛)Java
- uboot源码——C阶段的start_armboot函数
- JavaScript-Iterable迭代
- 任务计划命令 linux,linux执行一次性任务计划at命令
- django shortcut函数
- MySQL高级知识(四)——Explain
- 并发设计模式之Guarded Suspension模式
- golang websocket 聊天室demo
- 人脸识别常用开源数据集大全
- 矩阵的Cholesky分解的Matlab简洁实现
- c语言编写cad建筑画图程序,CAD建筑平面图绘图步骤试题.doc
- str在c语言什么意思,C语言(str)是什么意思
- Thief-Book v1.0.1免费版
- 阿里妈妈年赚2500亿:淘宝商家的“曝光焦虑”生意好做吗?
- SolidWorks学习笔记5创建基准面,基准线,基准点
- pdf批量修改属性工具软件使用教程
- 什么是前置审批许可、后置审批许可?
- 【PAT甲级 - C++题解】1147 Heaps
- Rambo: Last Blood
热门文章
- 打造自己的linux桌面,一步一步打造你自己的Ubuntu 10.04桌面
- linux进程调度时间片算法,进程调度算法–时间片轮转调度算法
- 汽车维修企业管理【5】
- wps excel 向下选中指定行数并填充根据公式计算好的数据
- Excel如何将数据填充完下方的空白单元格
- 代码检查工具CppCheck
- HP.Infotech.CodeVisionAVR.v1.24.6.Pro
- 有关CATIA软件的几个使用技巧
- obs摄像头模糊_OBS录制视频画面很糊,不清晰,怎么调整设置?
- android 周月切换日历,vue-week-picker实现支持按周切换的日历