一切动画尽在掌握之中

xujunjunabcd 8年前
   <p><img src="https://simg.open-open.com/show/e0bdc147275af190e9d4d72e14691508.jpg"></p>    <p>图片发自简书App</p>    <p>我们熟悉的Frame动画和Tween动画是Android 3.0之前的,这边就不讲解了。今天我要讲的是从3.0开始引入的Property动画。</p>    <p>Property动画抓住三个核心概念</p>    <p>1.ValueAnimator</p>    <p>2.ObjectAnimator</p>    <p>3.ViewPropertyAnimator</p>    <p>然后在ValueAnimator中抓住一下两个概念</p>    <p>1.TypeEvaluator</p>    <p>2.TimeInterpolator</p>    <p>可以说,搞清楚以上5点,一切动画尽在掌握之中</p>    <h2>ValueAnimator</h2>    <p>ValueAnimator是整个属性动画机制当中最核心的一个类,属性动画的运行机制是通过不断地对值进行操作来实现的,而初始值和结束值之间的动画过渡就是由ValueAnimator这个类来负责计算的。</p>    <pre>  <code class="language-java">ValueAnimator anim = ValueAnimator.ofFloat(0f, 1f);    anim.setDuration(300);    anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {    @Override    public void onAnimationUpdate(ValueAnimator animation) {        float currentValue = (float) animation.getAnimatedValue();        Log.d("TAG", "cuurent value is " + currentValue);      }    });    anim.start();</code></pre>    <h2>ObjectAnimator</h2>    <p>相比于ValueAnimator,ObjectAnimator可能才是我们最常接触到的类,因为ValueAnimator只不过是对值进行了一个平滑的动画过渡,但我们实际使用到这种功能的场景好像并不多。而ObjectAnimator则就不同了,它是可以直接对任意对象的任意属性进行动画操作的,比如说View的alpha、rotation、translationX和scaleY这几个值,分别可以完成淡入淡出、旋转、水平移动、垂直缩放这几种动画。</p>    <pre>  <code class="language-java">ObjectAnimator animator = ObjectAnimator.ofFloat(textview, "alpha", 1f, 0f, 1f);    animator.setDuration(5000);    animator.start();</code></pre>    <h2>AnimatorSet</h2>    <p>AnimatorSet 提供了一个把多个动画组合成一个组合的机制,并可设置组中动画的时序关系,如同时播放,顺序播放等。</p>    <ul>     <li>after(Animator anim) 将现有动画插入到传入的动画之后执行</li>     <li>after(long delay) 将现有动画延迟指定毫秒后执行</li>     <li>before(Animator anim) 将现有动画插入到传入的动画之前执行</li>     <li>with(Animator anim) 将现有动画和传入的动画同时执行</li>    </ul>    <pre>  <code class="language-java">ObjectAnimator moveIn = ObjectAnimator.ofFloat(textview, "translationX", -500f, 0f);    ObjectAnimator rotate = ObjectAnimator.ofFloat(textview, "rotation", 0f, 360f);    ObjectAnimator fadeInOut = ObjectAnimator.ofFloat(textview, "alpha", 1f, 0f, 1f);    AnimatorSet animSet = new AnimatorSet();    animSet.play(rotate).with(fadeInOut).after(moveIn);    animSet.setDuration(5000);    animSet.start();</code></pre>    <h2>TypeEvalutors</h2>    <p>evaluate()方法当中传入了三个参数,第一个参数fraction非常重要,这个参数用于表示动画的完成度的,我们应该根据它来计算当前动画的值应该是多少,第二第三个参数分别表示动画的初始值和结束值。那么下面代码的逻辑就比较清晰了,用结束值减去初始值,算出它们之间的差值,然后乘以fraction这个系数,再加上初始值,那么就得到当前动画的值了。</p>    <pre>  <code class="language-java">public class FloatEvaluator implements TypeEvaluator {     public Object evaluate(float fraction, Object startValue, Object endValue) {       float startFloat = ((Number) startValue).floatValue();       return startFloat + fraction * (((Number) endValue).floatValue() - startFloat);}  }</code></pre>    <h2>TimeInterpolator</h2>    <p>Time interplator定义了属性值变化的方式,如线性均匀改变,开始慢然后逐渐快等。在Property Animation中是TimeInterplator,在View Animation中是Interplator,这两个是一样的,在3.0之前只有Interplator,3.0之后实现代码转移至了TimeInterplator。Interplator继承自TimeInterplator,内部没有任何其他代码。</p>    <ul>     <li>AccelerateInterpolator 加速,开始时慢中间加速</li>     <li>DecelerateInterpolator 减速,开始时快然后减速</li>     <li>AccelerateDecelerateInterolator 先加速后减速,开始结束时慢,中间加速</li>     <li>AnticipateInterpolator 反向 ,先向相反方向改变一段再加速播放</li>     <li>AnticipateOvershootInterpolator 反向加回弹,先向相反方向改变,再加速播放</li>     <li>BounceInterpolator 跳跃,快到目的值时值会跳跃</li>     <li>CycleIinterpolator 循环,动画循环一定次数,值的改变为一正弦函数</li>     <li>LinearInterpolator 线性,线性均匀改变</li>     <li>OvershottInterpolator 回弹,最后超出目的值然后缓慢改变到目的值</li>    </ul>    <pre>  <code class="language-java">private void startAnimation() {    Point startPoint = new Point(getWidth() / 2, RADIUS);    Point endPoint = new Point(getWidth() / 2, getHeight() - RADIUS);    ValueAnimator anim = ValueAnimator.ofObject(new PointEvaluator(), startPoint, endPoint);    anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {        @Override        public void onAnimationUpdate(ValueAnimator animation) {            currentPoint = (Point) animation.getAnimatedValue();            invalidate();        }    });    anim.setInterpolator(new BounceInterpolator());    anim.setDuration(3000);    anim.start();    }</code></pre>    <h2>ViewPropertyAnimator</h2>    <p>ViewPropertyAnimator其实算不上什么高级技巧,它的用法格外的简单,只不过和前面所学的所有属性动画的知识不同,它并不是在3.0系统当中引入的,而是在3.1系统当中附增的一个新的功能。</p>    <pre>  <code class="language-java">textview.animate().x(500).y(500).setDuration(5000);</code></pre>    <p>源码上传在 <a href="/misc/goto?guid=4959677031025866892" rel="nofollow,noindex">GitHub</a></p>    <p> </p>    <p>来自:http://www.jianshu.com/p/2232d566e935</p>    <p> </p>    <p><span style="background:rgb(189, 8, 28) url("data:image/svg+xml; border-radius:2px; border:medium none; color:rgb(255, 255, 255); cursor:pointer; display:none; font:bold 11px/20px "Helvetica Neue",Helvetica,sans-serif; left:30px; opacity:0.85; padding:0px 4px 0px 0px; position:absolute; text-align:center; text-indent:20px; top:30px; width:auto; z-index:8675309">Save</span></p>