Android高级动画(1)

作者: 大公爵 | 来源:发表于2017-06-28 14:18 被阅读5186次

    目录

    Android高级动画(1)http://www.jianshu.com/p/48554844a2db
    Android高级动画(2)http://www.jianshu.com/p/89cfd9042b1e
    Android高级动画(3)http://www.jianshu.com/p/d6cc8d218900
    Android高级动画(4)http://www.jianshu.com/p/91f8363c3a8c

    为什么要学好动画

    动画在移动App开发中的重要性不言而喻,通俗点讲,动画可以让我们的App界面不那么死板,可以带来酷炫的交互效果,用Material Design专业点的说法,动画是一种高级的用户反馈,对用户操作、选择结果的一种反馈,对程序执行过程的动态展示,对用户视觉和注意力的引导,帮助用户更好地理解App的功能设计,Android5.0新生的动画更是体现出这个理念。所以从这点上说,动画的意义远不止酷炫这一层面。

    那么我们就更加有理由要学好动画,把动画应用到我们的项目中去。从这篇文章开始,我们将会全面地学习Android中的动画系统。我们会讲到每一种动画的原理、使用方法、应用场景、优缺点等,关于矢量动画,由于原理和实现方式相对复杂,我们会花比较大的篇幅来学习。最后,我们会封装一个通用动画库来简化动画的使用。

    OK,那我们废话少说,开始一场愉快的Android动画之旅吧!

    大纲

    Android高级动画课程大纲

    Tween动画

    Tween动画是Android最早的动画框架,从Android1.0就开始提供。Tween动画使用简单,功能也不强,支持代码和xml两种方式编写动画。我们来看一个演示:

    Tween动画

    这是一个常规的Tween动画,用xml编写动画,用AnimationUtils加载动画,实现如下:

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android"
        android:shareInterpolator="true">
    
        <rotate android:fromDegrees="0"
                android:toDegrees="359"
                android:duration="1000"
                android:repeatCount="1"
                android:repeatMode="reverse"
                android:pivotX="50%"
                android:pivotY="50%"/>
    </set>
    
    LinearLayout layout = (LinearLayout)findViewById(R.id.layout_1);
    Animation animation = AnimationUtils.loadAnimation(this, R.anim.tween_1);
    layout.startAnimation(animation);
    

    Tween动画使用起来简单,效果也比较流畅,但是缺点也是很明显,首先就是拓展性太差,只能写移动、缩放、旋转、渐变四种动画,以及这四种动画的组合,不支持自定义View的拓展。其次一个致命的缺点就是动画只是屏幕绘制上的动画,控件的属性并没有改变,一个经典的问题就是一个Button从一个地方移动到另一个地方,点击事件还是在原来的地方。所以Tween动画我们现在也基本放弃了,所有使用Tween动画的场景都可以用属性动画来替代。

    下面属性动画闪亮登场

    属性动画

    属性动画是Android3.0版本推出的动画框架,其功能和拓展性都很强。它不仅能实现所有Tween动画的功能,还有很强的拓展性,根本原因是属性动画从本质上已经完全摆脱了控件,虽然我们大多数情况下使用属性动画都是给控件做动画,但是属性动画的底层只是一个数值发生器,和控件没有半毛钱关系。

    [数值发生器]

    ValueAnimator:数值发生器,这是属性动画的根本,ValueAnimator的功能就是在两个数值范围内,顺序地产生过渡数值,过渡速率可以通过Intepolator来控制,过渡时间通过duration来设置,最终产生一组有特定变化速率的数值序列。那这个数值序列产生了干嘛呢?你想干嘛就干嘛。

    ValueAnimator animator = ValueAnimator.ofFloat(0, 100);
    animator.setDuration(1000);
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            float fraction = valueAnimator.getAnimatedFraction(); // 当前动画进度百分比,范围是0-1
            float value = (float)valueAnimator.getAnimatedValue(); // 当前动画值,范围是ofFloat的参数
        }
     });
    

    [应用动画]

    通过ValueAnimator我们得到了一组变化的数值序列,大多数情况下我们都是拿来给控件做动画,实现如下:

    ValueAnimator animator = ValueAnimator.ofFloat(0, 360);
    animator.setDuration(1000);
    animator.setInterpolator(new AccelerateInterpolator());
    animator.setRepeatCount(1);
    animator.setRepeatMode(ValueAnimator.REVERSE);
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            float value = (float)valueAnimator.getAnimatedValue();
            imageView.setRotationY(rotate);
        }
     });
    animator.start();
    

    我们使用ValueAnimator产生一组0-360的数值序列,数值变化速率遵循AccelerateInterpolator函数,时间为1000毫秒,然后在回调函数里我们可以获取当前动画值value,然后调用imageView.setRotationY(value);这样就实现了imageView的旋转动画。效果如下:

    ValueAnimator

    [应用拓展]

    上面产生的数值序列,我们除了可以用来做动画,还可以用在任何你能想到的地方。比如我们有一个TextView显示金额,这个金额要动画地从0增加到2000,这就可以用ValueAnimator。

    ValueAnimator animator = ValueAnimator.ofFloat(0, 2000);
    animator.setDuration(1000);
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            float value = (float)valueAnimator.getAnimatedValue();
            textView.setText(String.valueOf(value));
        }
     });
    animator.start();
    

    效果如下:

    ValueAnimator

    [ObjectAnimator]

    可能你已经注意到了,ValueAnimator是属性动画底层的数值发生器,虽然拓展性很强,但是用它来写动画实在是麻烦,这一点Google当然也想到了,于是ObjectAnimator就诞生了,它把ValueAnimator封装在里面,我们用它可以简单地实现对控件的动画。代码如下:

    ObjectAnimator animator = ObjectAnimator.ofFloat(imageView, "rotationY", 0, 359);
    animator.setDuration(1000);
    animator.setRepeatCount(1);
    animator.setRepeatMode(ValueAnimator.REVERSE);
    animator.start();
    

    效果和上面是一样的

    ObjectAnimator

    第一行代码有三个参数,分别是做动画的控件, 需要动画的属性名,第三个是可变参数,表示动画值的范围。其中属性名是一个字符串,ObjectAnimator会根据这个属性名拼一个set[属性名](setRotationY)方法,然后用反射调用,从而实现动画。

    [自定义View]

    既然ValueAnimator可以用在任何地方,那当然也可以用在自定义View。我写了一个很简单的自定义View,就是画一个扇形,扇形的角度由一个叫fraction的属性决定。我们在自定View中需要做动画的属性一定要有一个setFraction方法,以便让属性动画通过反射调用。

    ObjectAnimator animator = ObjectAnimator.ofFloat(customView, "fraction", 0, 1);
    animator.setDuration(2000);
    animator.start();
    

    效果如下:


    CustomView

    [Path动画]

    5.0之后,ObjectAnimator还有一个强大的功能,那就是根据一个Path路径做动画,先看效果:

    PathAnimator

    这样的效果要让我们自己写还是要费点事的,但是用ObjectAnimator来做就太简单了:

    ObjectAnimator animator = ObjectAnimator.ofFloat(iv, View.X, View.Y, path);
    animator.setDuration(2000);
    animator.setRepeatCount(1);
    animator.setRepeatMode(ValueAnimator.REVERSE);
    animator.start();
    

    什么?和正常的用法基本一样?是的,区别就是ObjectAnimator.ofFloat方法的重载,传四个参数,第一个是做动画的控件,第二和第三个是动画的方向,第四个就是动画的Path路径,就是这么简单,剩下的就是构建Path了,Path的构建你可以随心所欲。你能构建出多酷炫的Path,它就能展示多酷炫的动画。

    Interpolator

    Interpolator翻译叫插值器,它是个好东西,它用来控制动画过程的变化速率,没有它我们的动画将会一直匀速变化,如果要自己控制变化速率那也太麻烦了。Android中Interpolator总共有8种。

    1、[Linear]

    Linear

    2、[Accelerate]

    Accelerate

    3、[Decelerate]

    Decelerate

    4、[AccelerateDecelerate]

    AccelerateDecelerate

    5、[Anticipate]

    Anticipate

    6、[Overshoot]

    Overshoot

    7、[Bounce]

    Bounce

    8、[Cycle]

    Cycle

    帧动画

    帧动画是一个比较简单的动画框架,原理就像播放幻灯片一样,传一组图片进去,然后依次循环播放,可以设置每一张图片的播放时间。帧动画可以通过xml创建,也可以java代码动态构建,使用起来还是比较方便的。先看效果:

    FrameAnimator

    代码如下:

    <?xml version="1.0" encoding="utf-8"?>
    <animation-list xmlns:android="http://schemas.android.com/apk/res/android"
                    android:oneshot="false">
        <item android:drawable="@mipmap/run_1" android:duration="150" />
        <item android:drawable="@mipmap/run_2" android:duration="150" />
        <item android:drawable="@mipmap/run_3" android:duration="150" />
        <item android:drawable="@mipmap/run_4" android:duration="150" />
    </animation-list>
    
    ImageView image = (ImageView) findViewById(R.id.iv_1);
    image.setImageResource(R.drawable.animation_list);
    AnimationDrawable anim = (AnimationDrawable) image.getDrawable();
    anim.start();
    

    可以看出来帧动画的使用还是比较简单的,但是缺点也很明显,就是动画不连续。如果要想动画连续也简单,就把图片做的多一点,每张图片只渐变一点点。但是这样随之而来的另一个问题就是图片太多,体积太大。所以也只能在图片流畅度和图片数量体积之间做一个平衡。这点比较尴尬。但是一般来说用来做一个动画的小Logo还是够用的。

    CircularReveral

    这是Android5.0推出的新的动画框架,可以给View做一个揭露效果。效果如下:

    CircularReveal

    效果相当赞有木有!代码实现也很简单:

    Animator anim = ViewAnimationUtils.createCircularReveal(oval, oval.getWidth() / 2, oval.getHeight() / 2, oval.getWidth(), 0);
    anim.setDuration(2000);
    anim.start();
    
    Animator anim = ViewAnimationUtils.createCircularReveal(rect, 0, 0, 0, (float) Math.hypot(rect.getWidth(), rect.getHeight()));
    animator2.setDuration(2000);
    animator2.start();
    

    五个参数分别是View,中心点坐标,开始半径,结束半径。通过这五个参数的配合,我们可以做出很多不同的效果。

    Activity转场动画

    1、传统转场动画

    传统转场动画我们再熟悉不过了,不再多说,直接看效果:

    NormalTrans

    代码如下:

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
        <translate android:fromXDelta="100%"
                   android:toXDelta="0%"
                   android:duration="500" />
    </set>
    
    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
        <translate android:fromXDelta="0%"
                   android:toXDelta="-40%"
                   android:duration="500" />
    </set>
    
    startActivity(new Intent(this, Activity2.class));
    overridePendingTransition(R.anim.slide_right_in, R.anim.slide_left_out);
    

    2、5.0新转场动画

    这个厉害了!5.0新的转场动画分为4种,Explode、Slide、Fade、Share,传统的转场动画只能作用于整个页面,不能对页面中的单个元素做控制,而5.0新转场动画可以控制页面中的每个元素,根据元素动画方式,分为4大类。
    我们先来看下四种效果:

    NewTrans

    (1)Explode
    Explode的效果是下一个页面的元素从四面八方进入,最终形成完整的页面。代码如下:

    // 跳转
    Intent intent = new Intent(this, CActivity.class);
    startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
    
    // 跳转的Activity
    public class CActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(@Nullable Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            getWindow().setEnterTransition(new Explode());
            setContentView(R.layout.activity_c);
        }
    }
    

    在跳转时就要注意一点,intent后面还要再传一个参数bundle,固定写法ActivityOptions.makeSceneTransitionAnimation(this).toBundle(),下一个Activity根据这个就能识别出使用5.0新转场动画。

    跳转的Activity在onCreate方法中,调用getWindow().setEnterTransition(new Explode());即可,注意要在setContentView之前哦。

    (2)Slide
    Slide就是下一个页面元素从底部依次向上运动,最终形成完整的页面。代码如下:

    // 跳转
    Intent intent = new Intent(this, CActivity.class);
    startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
    
    // 跳转的Activity
    public class CActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(@Nullable Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            getWindow().setEnterTransition(new Slide());
            setContentView(R.layout.activity_c);
        }
    }
    

    和Explode几乎没有什么区别,就是跳转的Activity在onCreate方法中设置transition为Slide即可。

    (3)Fade
    Fade就是下一个页面元素渐变出现,最终形成完整的页面。代码如下:

    // 跳转
    Intent intent = new Intent(this, CActivity.class);
    startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
    
    // 跳转的Activity
    public class CActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(@Nullable Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            getWindow().setEnterTransition(new Fade());
            getWindow().setExitTransition(new Fade());
            setContentView(R.layout.activity_c);
        }
    }
    

    同样,就是跳转的Activity在onCreate方法中设置transition为Fade即可,只不过这里要最好要同时设置Enter和Exit。

    (4)Share
    Share是最复杂的一种转场方式,在跳转的两个Activity之间,如果有相同的View元素,那么,两个元素就可以设置成共享状态,在跳转时,这个View就会从第一个Activity的显示状态过渡到第二个Activity的显示状态,给用户的感觉仿佛是两个Activity共享一个View。

    我们再来单独看下Share的效果:

    Share

    很酷炫有木有有木有

    前后两个Activty都有两个共同的元素,一个机器人Logo,一个Android文字,但是它们在两个Activity中的位置、大小、颜色都不一样。于是,在两个Activity跳转过程中,位置、大小、颜色会自动有一个渐变的过程,从第一个Activity的状态渐变到第二个Activity的状态。从而给人一种两个Activity共享元素的感觉。

    代码如下:

    <!-- 首先,两个Activity共享的元素需要设置相同的transitionName: android:transitionName="fab" -->
    <Button
         android:id="@+id/fab_button"
         android:layout_width="56dp"
         android:layout_height="56dp"
         android:background="@mipmap/ic_launcher"
         android:elevation="5dp"
         android:onClick="explode"
         android:transitionName="fab" />
    
    <Button
         android:id="@+id/fab_button"
         android:layout_width="160dp"
         android:layout_height="160dp"
         android:layout_alignParentEnd="true"
         android:layout_below="@id/holder_view"
         android:layout_marginTop="-80dp"
         android:background="@mipmap/ic_launcher"
         android:elevation="5dp"
         android:transitionName="fab" />
    
    // 跳转时,要为每一个共享的view设置对应的transitionName
    View fab = findViewById(R.id.fab_button);
    View txName = findViewById(R.id.tx_user_name);
    intent = new Intent(this, CActivity.class);
    startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this,
            Pair.create(view, "share"),
            Pair.create(fab, "fab"),
            Pair.create(txName, "user_name"))
            .toBundle());
    
    // 跳转的Activity在onCreate方法中开启Transition模式
    public class CActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(@Nullable Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
            setContentView(R.layout.activity_c);
        }
    }
    

    实现代码看上去比较多,实际也比较简单。毕竟这么酷炫的转场动画化,多写两行代码也值得。

    (5)Share转场的经典应用
    Share转场这种方式最经典的应用就是列表页跳详情页。因为通常列表页和详情页都会包含相同View元素,使用Share转场给人一种连续过渡效果,体验非常棒。

    下面看一个简单的示例:

    demo

    好了,Activity转场就讲到这里,充分利用这些动画,可以做出非常精彩的转场效果。

    下一篇

    OK,Android高级动画第一篇就到这里了,为什么不讲完呢?因为下一篇我们要上点儿硬货,来讲讲Android矢量动画,彻底颠覆传统的动画方式。牛逼酷炫掉渣天的动画效果正在等着你。

    相关文章

      网友评论

      • 若兮生生:厉害 厉害 讲得好啊 很受用
      • 修得养得梦得过得:为啥我用小米在第二个页面直接调用 finish 木有退出动画?非要用返回键才有?

        5.0新转场动画 均出现这个问题- -
        大公爵:@修得养得梦得过得 谢谢,finish的问题不是这个动画系列的重点
        修得养得梦得过得:这篇文章写得好全,写的好啊!必须先点个赞。
        但是由于篇幅内容原因,很多知识点没有写细,但是我觉得这才是技术文章应该有的范。
        修得养得梦得过得:可以考虑用 `onBackPressed` 代替 `finish`
      • EruDev:有源码吗
        EruDev:@大公爵 我下了,小白感觉有点难,啃不下来:joy:
        大公爵:@EruDev 我贴了github的链接
      • 火炎焱燚_719b:看的一脸懵逼😞
        大公爵:@火炎焱燚_719b 动画这块确实比较乱,我自己在写的时候总觉得自己表达的不好,尤其是矢量动画,你如果看起来吃力的话,建议直接把我的工程down下来,看代码也许更直白。
        火炎焱燚_719b: @大公爵 不不不,写的好。我基础不好😜
        大公爵:@火炎焱燚_719b 写的不好:smile::smile:
      • hydCoder:总结的很详细很到位,赞!:+1:
      • 头发依然在:大写的赞,
        那个半圆怎么只绘制180~360度部分,我自己写的从180度~360度结束后,显示的是个圆
      • JohnyPeng:厉害
      • 比克大魔王_:很赞,666😄😄
      • 0445981d6022:矢量动画出来了么?
        0445981d6022:@大公爵 谢谢~
        大公爵:@谢伊帕特里克寇马克 4篇已经全部完结了
      • 苏未_:文章最后那个简单例子是否有源码可以提供参考呢?
        苏未_:@大公爵 :smile: 原来你刚发布
        大公爵:@嘈天巴闭_ 请看第三篇,两个工程源码都贴了链接
      • Avalon1:5.0推出的那几个动画。兼容不到5.0一下吧。:unamused:
        大公爵:@Avalon1 现在4.4及以下的用户已经不多了,再过一两年就可以升到5.0了
        Avalon1:@大公爵 略有点遗憾。毕竟目前还是要支持到4.0的
        大公爵:@Avalon1 是的
      • 爱言语论:很强,很全
        _这样不好:大神!
      • MrAllRight_Liu:不错不错,5.0的转场动画是不是不能兼容以前的版本,有没有很好的支持库可以扩展?期待你的框架
        大公爵:@0d6d304c10b0 5.0专场动画是不能支持老版本的,目前没有特别好的解决方法,之前有种做法是用传统转场方式先跳过去,动画时间很短或者为0的渐变,然后在下一个activity对view做动画
      • cc54aa4ba7ad:实用的学习总结,赞
      • Gooljim:写得通俗易懂
      • Peng丶Gao:赞,学习了~
      • seph_von:赞,浅显易懂!

      本文标题:Android高级动画(1)

      本文链接:https://www.haomeiwen.com/subject/zkqjqxtx.html