Android 4.4.2引入的超炫动画库

  • 概述
  • Scene
  • Transition
  • TransitionManager
  • 常用API
    • 1.4.1. AutoTransition
    • 1.4.2. ChangeBounds
    • 1.4.3. ChangeClipBounds
    • 1.4.4. ChangeImageTransform
    • 1.4.5. ChangeScroll
    • 1.4.6. ChangeTransform
    • 1.4.7. Explode
    • 1.4.8. Fade
    • 1.4.9. Slide
    • 1.4.10. TransitionSet
    • 1.4.11. PathMotion
    • 1.4.12. 自定义Transition
  • Note

0

概述

Android 4.4.2 (API level 19)引入Transition框架,之后很多APP上都使用该框架做出很酷炫的效果,如 Google Play Newsstand app

还有github上很火的plaid

(https://github.com/nickbutcher/plaid)

在app中适当得使用上Transition能带来较好的用户体验,视频中介绍了该框架的基本使用以及其中核心的一些类和方法,只有学会这些基本的API才能在之后的Activity/Fragment过渡定制一些自己想要的效果。

先看官网的一张关系图

图中有三个核心的类,分别是Scene、Transition和TransitionManager,下面对这个三个核心类展开分析。

1

Scene

Scene场景,用于保存布局中所有View的属性值,创建Scene的方式可以通过getSceneForLayout方法

getSceneForLayout(ViewGroup sceneRoot, int layoutId, Context context)

比如:

也可以直接new Scene(ViewGroup sceneRoot, View layout)

两种方式都需要传SceneRoot,即该场景的根节点。

2

Transition

Transition过渡动画,前面创建了两个场景,分别保存了视图的一些属性,比如Visibility、position等,Transition就是对于这些属性值的改变定义过渡的效果。从上图可以看到系统内置了一些常用的Transition,Transition的创建可以通过加载xml,如:

res/transition/fade_transition.xml

然后在代码中:

或者直接在代码中:

3

TransitionManager

TransitionManeger用于将Scene和Transition联系起来,它提供了一系列的方法如setTransition(Scene fromScene, Scene toScene, Transition transition)指明起始场景和结束场景、他们的过渡动画是什么,go(Scene scene, Transition transition),到指定的场景所使用的过渡动画是什么,beginDelayedTransition(ViewGroup sceneRoot, Transition transition),在当前场景到下一帧的过渡效果是什么。比如这里使用go()方法,效果:

注意这里两个Scene中红绿两个方块除了位置和大小不一样,id是一致的,transition记录下两个Scene前后属性值,根据属性值的改变执行过渡动画,默认情况下对SceneRoot下的所有View执行动画效果,我们可以通过Transition.addTarget和removeTarget方法选择性添加或移除执行动画的View。

4

常用API

有时候我们只想改变当前已展示的视图层级中View的状态,可以通过beginDelayedTransition实现,下面列举系统内置的Transition的使用。

AutoTransition

AutoTransition默认的动画效果,对应xml tag为autoTransition

其实是以下几个动画组合顺序执行:

在代码中使用:

ChangeBounds

ChangeBounds对应xml tag为changeBounds,根据前后布局界限的变化执行动画。

ChangeClipBounds

ChangeClipBounds对应xml tag为changeClipBounds,作用对象:View的getClipBounds()值

ChangeImageTransform

对应xml tag为changeImageTransform,作用对象:ImageView的matrix

ChangeScroll

对应xml tag为changeScroll,作用对象:View的scroll属性值

ChangeTransform

对应xml tag 为changeTransform,作用对象:View的scale和rotation

Explode

对应xml tag为explode,作用对象:View的Visibility

Fade

对应xml tag为fade,作用对象:View的Visibility

可以在初始化是指定IN或者OUT分别对应淡入和淡出,若不指定默认为淡入淡出效果

Slide

对应xml tag为slide,作用对象:View的Visibility

TransitionSet

对应xml tag为transitionSet

可以在代码中创建transitionSet如:

也可以通过加载xml布局创建transitionSet:

xml布局长这样:

通过transitionOrdering属性设置动画执行的顺序,together表示同时执行,sequential表示顺序执行,在代码中可以调用TransitionSet的setOrdering(int)方法,属性值传ORDERING_SEQUENTIAL或者ORDERING_TOGETHER

在代码中:

这里结合changeImageTransform和changeTransform,效果如下:

PathMotion

Transition的辅助工具,以path的方式指定过渡效果,两个具体实现类ArcMotion和PatternPathMotion,看下ArcMotion的效果

它的运动轨迹是条曲线,有兴趣的可以研究下它的实现算法,在源码中有个很萌的图如下:

自定义Transition

除了系统内置的Transition,我们还可以自定义Transition效果,需要继承Transition

其工作原理是在captureStartValues和captureEndValues中分别记录View的属性值,官网建议确保属性值不冲突,属性值的命名格式参考:

package_name:transition_name:property_name

在createAnimator中创建动画,对比属性值的改变执行动画效果,如自定义修改颜色动画效果:

在两个Scene中使用自定义过渡动画,效果如下:

5

Note

  1. Android 版本在4.0(API Level 14)到4.4.2(API Level 19)使用Android Support Library’s
  2. 对于 SurfaceView可能不起效果,因为SurfaceView的实例是在非UI线程更新的,因此会造成和其他视图动画不同步。
  3. 某些特定的转换类型在应用到TextureView时可能不会产生所需的动画效果。
  4. 继承自AdapterView的如ListView,与该框架不兼容。
  5. 不要对包含文本的视图的大小进行动画
时间: 2024-11-05 06:24:22

Android 4.4.2引入的超炫动画库的相关文章

Android使用SVG矢量图打造酷炫动效!

尊重原创,欢迎转载,转载请注明: FROM  GA_studio   http://blog.csdn.net/tianjian4592 一个真正酷炫的动效往往让人虎躯一震,话不多说,咱们先瞅瞅效果: 这个效果我们需要考虑以下几个问题: 1. 这是图片还是文字: 2. 如果是图片该如何拿到图形的边沿线坐标,如果是文字呢? 3. 如果拿到了边沿线坐标,如何让光线沿着路径跑动: 4. 怎么处理过程的衔接: 以上四个问题似乎不是太好处理,而这几个问题也正好是这个效果精华所在,接下来咱们一个一个进行考虑

超炫的Android Path Button效果

超炫的Android Path Button效果 一款超炫的Android Path Button效果源码,代码很简洁只有一个文件,改起来很容易,希望能对大家有所帮助. 下载地址:http://www.devstore.cn/code/info/1015.html 运行截图:   

可删除超炫&多种特效的Card视图(改造自cardsui-for-android开源项目),提供DEMO下载

       这里贴几个效果图,我做了一个gif的动态图,但是不知道为什么上传后图片不动,所以只能放在相册里. 如果大家想看动态的图片演示请点击后面的链接gif动态演示图片 实例Demo下载地址在本文最后 简单介绍 这个Demo主要是使用了cardsui-for-android开源项目,并且做了一些优化和改进: 1.自定义card视图 2.添加长按事件,避免误操作 3.长按后可以删除card,并播放选中动画 4.删除后浮现一个悬浮button 5.点击悬浮button可以恢复之前删除的card视

Waves – 赞!超炫交互体验的点击动画效果

Waves 点击效果的灵感来自于谷歌的材料设计,很容易使用.只需要引入 waves.min.css 和 waves.min.js 到 HTML 文件中可以使用了.采用 touchstart 与 touchend 事件,支持移动设备.赶紧来体验吧! 效果演示     插件下载 您可能感兴趣的相关文章 Web 开发中很实用的10个效果[源码下载] 精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的创意的 404 错误页面设计 让网站动起来!12款优秀的 jQuery 动画插件 十

超炫的时间轴jquery插件Timeline Portfolio

Timeline Portfolio是一款按时间顺序专业显示事件的jquery时间轴插件,可以根据时间的先后嵌入各种媒体包括微博,视频和地图等.这个展现的模式非常适合设计师的作品集和个人简历的展示.Timeline Portfolio使用jquery和CSS3封装的非常棒,插件通过读取data.json文件来写入文档中,这样,您需要根据自己的需求设计下页面,然后再修改data.json里面的数据为自己的就可以实现一个超炫的时间轴网站了. jquery插件实例:超炫的时间轴jquery插件Time

几行css3代码实现超炫加载动画

之前为大家分享了css3实现的加载动画.今天为大家带来一款只需几行代码就可以实现超炫的动画加载特效.我们一起看下效果图: 在线预览   源码下载 实现代码: 极简的html代码: <div> <i></i> </div> css3代码: body { background: black; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; heig

超炫的粒子效果!代码,就应该这么写!

最近瞎逛的时候发现了一个超炫的粒子进度效果,有多炫呢?请擦亮眼镜! 粗略一看真的被惊艳到了,而且很实用啊有木有!这是 Jack Rugile 写的一个小效果,源码当然是有的.聪慧如你,肯定觉得这个东西so easy 要看啥源码,给我3分钟我就写出来了吧.所以你的思路可能是: 1)进度条的实现没什么好说的,简单的一个 fillRect(0,0,long,20),long和20是分别进度条的长宽.然后每帧动画调用前将画布清除clearRect(0,0,canvas.width,canvas.heig

ScrollReveal.js – 帮助你实现超炫的元素运动效果

ScrollReveal.js – 帮助你实现超炫的元素运动效果 ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果,帮助你的网站增加吸引力.只需要给元素增加 data-scrollreveal 属性,当元素进入可视区域的时候会自动被触发设置好的动画.

【Android自定义View实战】之超简单SearchView

[Android自定义View实战]之超简单SearchView 在Android开发中我们经常会用到搜索框,而系统提供的又不尽完美.所以自定义一个比较简单的SearchView. 效果图 实现代码 package cn.bluemobi.dylan.searchview; import android.content.Context; import android.text.Editable; import android.text.TextWatcher; import android.ut