안드로이드 학습노트 애니메이션 (하)

1. 내용 개술
이 편은 속성 애니메이션에 중심을 두고 안드로이드 학습 노트의 애니메이션(상)을 이어서 다음과 같은 내용을 포함한다. - 속성 애니메이션.
     - ObjectAnimator    
     - ValueAnimator    
     - PropertyValuesHolder    
     - ViewPropertyAnimator    
     - AnimatorSet   

- 플러그인과 평가기 분석
2. 속성 애니메이션
속성 애니메이션 개요
-       API11       , android2.3      nineoldandroids   。
-            view     。 view        view     。
-             ,       view,           。

ViewPropertyAnimator 사용
1. 예제
  @TargetApi(Build.VERSION_CODES.KITKAT)
    public void animate(View view) {
        final ViewPropertyAnimator animator = view.animate().x(200).y(300).alphaBy(-0.5f).rotationBy(60f).setInterpolator(new BounceInterpolator()).scaleXBy(0.3f).xBy(20).setDuration(2000);
        Log.e("TAG", view.getTranslationX() + " : " + view.getX());
        animator.setListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                animator.alpha(1f).xBy(100).scaleY(2f).translationY(100).setDuration(3000).setInterpolator(new CycleInterpolator(5)).start();
                Log.e("TAG", "animating...");
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });

        //       api>19
// animator.setUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
// @Override
// public void onAnimationUpdate(ValueAnimator animation) {
//
// }
// });
        animator.start();

    }

2. 해석 사용
1. ViewPropertyAnimator 객체 가져오기
  view.animate()    ViewPropertyAnimator  animator

2、animator를 통해view의 속성을 변경합니다
animator.alpha(1f).xBy(100).scaleY(2f).translationY(100).setDuration(3000).setInterpolator(new CycleInterpolator(5));   

메서드 해석:
     * x(),y()      view x,y       ,    
     * xBy(offset),yBy(offset),view x,y       ,   (offset),         ,    (alphaBy,translationXBy()   )
     * translationX(),translationY()    view translationX,translationY ,    
     * rotation()   view      
     * scaleX(),scaleY()   
     * setInterpolator()      
     * withStartAction(Runnable runnable)          API level 16
     * withEndAction(Runnable runnable)         ,             API level 16

참고:
    1、translationX    view x      (offset,    ,    ),x  view x  
    2、    start()  ,        ,      ,      start  

3. 애니메이션 실행 수신
- animator.setListener          
    - onAnimationStart       
    - onAnimationEnd        
    - onAnimationCancel       
    - onAnimationRepeat      

- animator.setUpdateListener       ,         api>=19

4、Activity가 종료될 때 애니메이션을 중지하여 메모리 유출을 방지
 @Override
    protected void onDestroy() {
        super.onDestroy();
        if (animator != null) {
            animator.cancel();
            animator = null;
        }
    }

ObjectAnimator 사용
예제
/** * ObjectAnimator * * @param view */
    public void objectAnimator(final View view) {
        final ObjectAnimator animator = ObjectAnimator.ofFloat(view, "scaleX", 1, 0.5f, 1);
        animator.addListener(new Animator.AnimatorListener() {   //       
            @Override
            public void onAnimationStart(Animator animation) {
                ObjectAnimator.ofFloat(view, "scaleY", 1, 0.5f, 1).setDuration(1000).start();
            }

            @Override
            public void onAnimationEnd(Animator animation) {

            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        animator.setDuration(1000).start();

    }

해석 사용
ObjectAnimator ValueAnimator    ,  Animation  ,              ,   of     view     ,
  • 흔한of방법
    - ofArgb(Object target, String propertyName, int... values)
    - ofFloat(Object target, String propertyName, float... values)
    - ofInt(Object target, String propertyName, int... values)
    - ofObject(Object target, String propertyName,TypeEvaluator evaluator, Object... values)
    - ofPropertyValuesHolder(Object target,PropertyValuesHolder... values)
    
  • offXXX방법분석
         target:       view   
         propertyName:     ,  alpha,scaleX,scaleY,rotationX,rotationY,translationX,translationY
         values:           ,  ofFloat(targetView,"alpha",0,1);      0 1
    
  • PropertyValuesHolder의 사용PropertyValuesHolder는 설정된 속성 변화 효과를 임시로 저장하고 마지막으로view
  • 에 같이 설정할 수 있습니다.
     /** * PropertyValuesHolder    * @param view */
        public void propertyValuesHolder(View view) {
    
            final PropertyValuesHolder alpha = PropertyValuesHolder.ofFloat("alpha", 1, 0.5f, 1);
            final PropertyValuesHolder scaleX = PropertyValuesHolder.ofFloat("scaleX", 1, 0.5f, 1);
            final PropertyValuesHolder scaleY = PropertyValuesHolder.ofFloat("scaleY", 1, 0.5f, 1);
            final ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(ivBall, alpha, scaleX, scaleY);
            animator.setDuration(1000).start();
    
        }

    4. 애니메이션 스니퍼 설정
    - addListener         ,         ,  ,  ,  
    - addUpdateListener        ,
    - addPauseListener           
    

    AnimatorListenerAdapter의 선택적 스니퍼 사용 가능
    animator.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    super.onAnimationEnd(animation);
                }
            });

    5.xml에서 쓰기
    <?xml version="1.0" encoding="utf-8"?>
    <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:duration="1000" android:propertyName="scaleX" android:valueFrom="1" android:valueTo="0.5f" android:valueType="floatType"></objectAnimator>

    6.메모리 유출 방지
        Activity       ,      ,  cancel    、  
    

    7.사용원칙
      ObjectAnimator    ,1、    view   (property)  set get  ,2、  set   view         ,      
    

    8. 임의의 대상에 대해 애니메이션을 할 때 상기 사용 원칙에 만족하지 않으면 애니메이션을 무효화시킬 수 있다. 정부는 세 가지 해결 방안을 제시한다.
    1、        ,       set get  
    2、           ,      set get  
    3、  ViewAnimator,      ,         
    

    ValueAnimator 사용
    ValueAnimator  ObjectAnimator  ,          ,             ,       ,           
    

    사용 예
    public void valueAnimator(final View view) {
            final ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1);
            valueAnimator.setDuration(1000);
            valueAnimator.start();
            valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    final float fraction = animation.getAnimatedFraction();
                    Log.e("TAG", "fraction=" + fraction);
                    view.setTranslationY((float) (Math.sin(fraction*2*3.14159) * 200));
                    view.setTranslationX((float) (Math.sin(fraction*2*3.14159) * 200));
                }
            });
        }

    해석 사용
    1. 일반적인 ofXXX 방법
    ofArgb(int... values)
    ofFloat(float... values)
    ofInt(int... values)
    ofPropertyValuesHolder(PropertyValuesHolder... values)
    ofObject(TypeEvaluator evaluator, Object... values)
    

    2. 감청 설정(ObjectAnimator) 3. xml에 정의된ValueAnimator
    <?xml version="1.0" encoding="utf-8"?>
    <animator xmlns:android="http://schemas.android.com/apk/res/android" android:duration="1000" android:valueFrom="1" android:valueTo="0" android:valueType="floatType">
    
    </animator>

    4. 자바 코드에 애니메이션 불러오기
    final Animator animator = AnimatorInflater.loadAnimator(AnimatorActivity.this,R.animator.animator_value);
    

    5. 평가기와 플러그인을 설정할 수 있다
     valueAnimator.setEvaluator(new FloatEvaluator());
     valueAnimator.setInterpolator(new AccelerateInterpolator());
    

    AnimatorSet 사용
    사용 예
    1. 자바 코드 사용
        public void set(View view) {
            AnimatorSet set = new AnimatorSet();
            final ObjectAnimator scaleX = ObjectAnimator.ofFloat(ivBall, "scaleX", 1, 0.5f, 1);
            final ObjectAnimator scaleY = ObjectAnimator.ofFloat(ivBall, "scaleY", 1, 0.5f, 1);
            final ObjectAnimator translationX = ObjectAnimator.ofFloat(ivBall, "translationX", 0, 100, 0);
            final ObjectAnimator translationY = ObjectAnimator.ofFloat(ivBall, "translationY", 0, 100, 0);
            final ObjectAnimator rotationX = ObjectAnimator.ofFloat(ivBall, "rotationX", 0, 360);
            final ObjectAnimator rotationY = ObjectAnimator.ofFloat(ivBall, "rotationY", 0, 360);
            final ObjectAnimator alpha = ObjectAnimator.ofFloat(ivBall, "alpha", 1, 0.5f, 1);
    //        set.playTogether(scaleX, scaleY, translationX, translationY, rotationX, rotationY, alpha); //   
    //        set.playSequentially(scaleX, scaleY, translationX, translationY, rotationX, rotationY, alpha); //   
            set.play(scaleX).with(scaleY).with(translationX).with(translationY).before(rotationX);
            set.play(rotationX).with(rotationY).after(alpha); //      
    
            set.setDuration(2000).start();
        }

    2. xml에서 애니메이션 정의
    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android" android:ordering="sequentially">
        <objectAnimator  android:duration="1000" android:propertyName="scaleX" android:valueFrom="0" android:valueTo="1" android:valueType="floatType" />
        <objectAnimator  android:duration="1000" android:propertyName="scaleY" android:valueFrom="0" android:valueTo="1" android:valueType="floatType" />
        <objectAnimator  android:duration="1000" android:propertyName="alpha" android:valueFrom="0" android:valueTo="1" android:valueType="floatType" />
    </set>

    자바 코드에서 정의된 애니메이션 사용하기
    final Animator set = AnimatorInflater.loadAnimator(context,R.animator.animator_set);
            set.setTarget(target);
            set.start();

    3. 감청 추가(상, 세 가지 감청 방식)
    해석 사용
      playTogether         ,playSequentially        ,
      play    with、before、after          ,with         ,before、after        /         
    

    플러그인과 평가기 분석
    보간기(TimeInterpolator)
    1. 플러그인의 개념
                     ,         ,        ,  ,  ,     。                        。
    

    2. 일반 플러그인
     OvershootInterpolator@android:anim/overshoot_interpolator                  
     AccelerateDecelerateInterpolator@android:anim/accelerate_decelerate_interpolator      
     AccelerateInterpolator@android:anim/accelerate_interpolator  
     AnticipateInterpolator@android:anim/anticipate_interpolator            
     AnticipateOvershootInterpolator@android:anim/anticipate_overshoot_interpolator                   
     DecelerateInterpolator@android:anim/decelerate_interpolator  
     LinearInterpolator@android:anim/linear_interpolator  
     BounceInterpolator@android:anim/bounce_interpolator        
     CycleInterpolator@android:anim/cycle_interpolator    
    

    3. CycleInterpolator 소스 분석
    소스 코드에서 보듯이 플러그인이 입력한 값과 되돌아오는 값의 관계 표현식은 다음과 같다. (float)(Math.sin(2*mCycles*Math.PI*input)) 입력이 계속 커질 때 출력 값은 sin 곡선 값으로 왔다갔다하며 필요한cycle 효과를 형성한다.
    @HasNativeInterpolator
    public class CycleInterpolator extends BaseInterpolator implements NativeInterpolatorFactory {
        public CycleInterpolator(float cycles) {
            mCycles = cycles;
        }
    
        public CycleInterpolator(Context context, AttributeSet attrs) {
            this(context.getResources(), context.getTheme(), attrs);
        }
    
        /** @hide */
        public CycleInterpolator(Resources resources, Theme theme, AttributeSet attrs) {
    
        }
    
        public float getInterpolation(float input) {
            return (float)(Math.sin(2 * mCycles * Math.PI * input));
        }
    
        private float mCycles;
    
    }
    

    4. 사용자 정의 플러그인 사용자 정의 Interpolator 클래스는 Interpolator를 실현하고 get Interpolation 방법을 실현하면 된다.
    간단한 예:
    package com.yu.propertyanimator;
    
    import android.annotation.TargetApi;
    import android.os.Build;
    import android.view.animation.Interpolator;
    
    /** * Created by pecu on 2016/08/27. */
    @TargetApi(Build.VERSION_CODES.LOLLIPOP_MR1)
    public class MyInterpolator implements Interpolator {
    
        @Override
        public float getInterpolation(float input) {
            return (float) Math.abs(Math.sin(input * Math.PI));  //     
        }
    }
    

    평가기(TypeEvaluator)
                            
    

    1. Type Evaluator 인터페이스는 Type Evaluator 인터페이스를 먼저 보고 추상적인 방법인 evaluate만 발견되며fraction을 통해 현재 값을 추산하는 데 사용된다.
    
    package android.animation;
    
    public interface TypeEvaluator<T> {
    
        /**
         * This function returns the result of linearly interpolating the start and end values, with
         * <code>fraction</code> representing the proportion between the start and end values. The
         * calculation is a simple parametric calculation: <code>result = x0 + t * (x1 - x0)</code>,
         * where <code>x0</code> is <code>startValue</code>, <code>x1</code> is <code>endValue</code>,
         * and <code>t</code> is <code>fraction</code>.
         *
         * @param fraction   The fraction from the starting to the ending values
         * @param startValue The start value.
         * @param endValue   The end value.
         * @return A linear interpolation between the start and end values, given the
         *         <code>fraction</code> parameter.
    
        public T evaluate(float fraction, T startValue, T endValue);
    
    }
    

    2. Float Evaluator 원본 코드를 보면 evaluate 방법의 반환 값이 이런 공식을 통해 계산된result=x0+t*(x1-x0)임을 알 수 있다.
    package android.animation;
    
    public class FloatEvaluator implements TypeEvaluator<Number> {
    
        /** * @param fraction The fraction from the starting to the ending values * @param startValue The start value; should be of type <code>float</code> or * <code>Float</code> * @param endValue The end value; should be of type <code>float</code> or <code>Float</code> * @return A linear interpolation between the start and end values, given the * <code>fraction</code> parameter. */
    
        public Float evaluate(float fraction, Number startValue, Number endValue) {
            float startFloat = startValue.floatValue();
            return startFloat + fraction * (endValue.floatValue() - startFloat);
        }
    }

    3. TypeEvaluator 사용자 정의
              ,     TypeEvaluator  ,   evaluate    
    

    간단한 사용자 정의 TypeEvaluator
    package com.yu.propertyanimator;
    
    import android.animation.TypeEvaluator;
    import android.graphics.Point;
    
    /** * Created by pecu on 2016/08/27. */
    public class MyEvaluator implements TypeEvaluator<Point> {
        Point point;
    
        @Override
        public Point evaluate(float fraction, Point startValue, Point endValue) {
            if (point == null) {
                point = new Point();
                point.x = (int) (startValue.x + fraction * (endValue.x - startValue.x));
                point.y = (int) (startValue.y + fraction * (endValue.y - startValue.y));
            } else {
                point.x = (int) (startValue.x + fraction * (endValue.x - startValue.x));
                point.y = (int) (startValue.y + fraction * (endValue.y - startValue.y));
            }
            return point;
        }
    }
    

    4. 사용자 정의 Evaluator 사용
    /** *            * @param view */
        public void evaluate(View view) {
            final ValueAnimator valueAnimator = ValueAnimator.ofObject(new MyEvaluator(), new Point(0, 0), new Point(0, screenHeight - 2*ivBall.getHeight()));
            valueAnimator.setInterpolator(new BounceInterpolator());
            valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    Point point = (Point) animation.getAnimatedValue();
                    ivBall.setX(point.x);
                    ivBall.setY(point.y);
                }
            });
            valueAnimator.setDuration(1000);
            valueAnimator.start();
    
        }

    원본 다운로드

    좋은 웹페이지 즐겨찾기