Android 팜플렛 - 애니메이션 메커니즘 및 팁 (1)

24261 단어 독서 노트
애니메이션은 앱의 가장 중요한 부분이다. 만약에 앱을'사람'으로 간주한다면 각종 구조는 이'사람'을 구성하는 각종 뼈이다. UI 인터페이스는 바로 이'사람'의 얼굴 이목구비, 피부색 등 외관이다. 애니메이션은'인체'내의 각종 부드러운 조직으로 완충에 사용되고'인체'내의'기관'이'상해'를 받지 않도록 보호할 수 있다.만약 애니메이션이 부족하다면 전체 시스템은 딱딱하고 아름다움이 없어 보일 것이다.
애니메이션 분류:
안드로이드의 애니메이션은 최초의 보기 애니메이션, 그리고 속성 애니메이션, 그리고 벡터 애니메이션으로 세 가지로 나뉘는데 한 걸음 한 걸음 보완되고 있다.
뷰 애니메이션:
소개:
단지 뷰의 보기 위치를 간단하게 바꾸지만 보기의 클릭 이벤트의 위치를 바꾸지 않는다. 즉, 만약에 Button이 보기 애니메이션을 통해 오른쪽으로 일정한 거리를 이동했지만 클릭 이벤트는 원래의 위치에 있기 때문에 순수한 애니메이션 효과를 만드는 데 적합하고 사용자의 상호작용에 적합하지 않다.
애니메이션 변환, 회전 애니메이션, 투명도 애니메이션, 축소 애니메이션 등 네 가지 기초 애니메이션과 조합 애니메이션(네 가지 기초 애니메이션의 조합)을 사용할 수 있다.
사용법:
자바 코드에서 직접 애니메이션 설정을 하거나 XML 파일에 애니메이션을 써서 사용할 때 직접 불러올 수 있습니다.
1. Java 코드에서 애니메이션 사용하기
public void alpha(View view){
        //         
        AlphaAnimation alphaAnimation = new AlphaAnimation(1,0);
        alphaAnimation.setRepeatMode(Animation.REVERSE);
        alphaAnimation.setRepeatCount(Animation.INFINITE);
        alphaAnimation.setDuration(3000);
        imageView.startAnimation(alphaAnimation);
    }

    public void translate(View view){
        //    
        TranslateAnimation translateAnimation = new TranslateAnimation(0F,100F,0F,200F);
        translateAnimation.setDuration(3000);
        imageView.startAnimation(translateAnimation);
    }

    public void rotate(View view){
        //    
        RotateAnimation rotateAnimation = new RotateAnimation(0,90);
        rotateAnimation.setDuration(3000);
        imageView.startAnimation(rotateAnimation);

    }

    public void scale(View view){
        //    
        ScaleAnimation scaleAnimation = new ScaleAnimation(1F,2F,1F,3F);
        scaleAnimation.setDuration(3000);
        imageView.startAnimation(scaleAnimation);
    }

    public void set(View view){
        //         
        AnimationSet animationSet = new AnimationSet(true);
        animationSet.setDuration(1000);

        ScaleAnimation scaleAnimation = new ScaleAnimation(0F,2F,0F,2F);
        scaleAnimation.setDuration(3000);
        animationSet.addAnimation(scaleAnimation);//    


        AlphaAnimation alphaAnimation = new AlphaAnimation(1,0);
        alphaAnimation.setRepeatMode(Animation.REVERSE);
        alphaAnimation.setRepeatCount(Animation.INFINITE);
        alphaAnimation.setDuration(3000);
        animationSet.addAnimation(alphaAnimation);//    

        RotateAnimation rotateAnimation = new RotateAnimation(0,180);
        rotateAnimation.setDuration(3000);
        animationSet.addAnimation(rotateAnimation);//    

        imageView.startAnimation(animationSet);
    }

2. XML 파일에 애니메이션을 정의하고 Java 코드에 직접 로드합니다.
anim 폴더에서 각각 필요한 보기 애니메이션을 정의하고 xml 파일에서 애니메이션의 속성을 정의합니다.
view_anim_alpha.xml: 

<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="1.0"
    android:toAlpha="0.0"
    android:duration="5000"
/>

view_anim_rotate.xml: 

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="180"
    android:duration="3000"
/>

view_anim_scale.xml: 

<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="1"
    android:toXScale="2"
    android:fromYScale="0"
    android:toYScale="2"
    android:duration="3000"
/>

view_anim_translate.xml: 

<translate xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="3000"
        android:fromXDelta="100"
        android:toXDelta="400"
        android:fromYDelta="100"
        android:toYDelta="300"
/>

view_anim_set.xml: 

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000">

    <rotate
        android:duration="3000"
        android:fromDegrees="0"
        android:toDegrees="90" />
    <scale
        android:duration="3000"
        android:fromXScale="1"
        android:toXScale="2"
        android:fromYScale="1"
        android:toYScale="2"/>
set>

Java 코드에서 AnimationUtils를 직접 사용합니다.loadAnimation() 메서드는 xml 파일에 정의된 애니메이션을 로드합니다.
public void alpha(View view){
        //         
        Animation alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.view_anim_alpha);
        imageView.startAnimation(alphaAnimation);
    }

    public void translate(View view){
        //    
        Animation translateAnimation =  AnimationUtils.loadAnimation(this, R.anim.view_anim_translate);
        translateAnimation.setDuration(3000);
        imageView.startAnimation(translateAnimation);
    }

    public void rotate(View view){
        //    
        Animation rotateAnimation =  AnimationUtils.loadAnimation(this, R.anim.view_anim_rotate);
        rotateAnimation.setDuration(3000);
        imageView.startAnimation(rotateAnimation);
    }

    public void scale(View view){
        //    
       Animation scaleAnimation =  AnimationUtils.loadAnimation(this, R.anim.view_anim_scale);
        imageView.startAnimation(scaleAnimation);
    }

    public void set(View view){
        //         
        Animation animationSet = AnimationUtils.loadAnimation(this, R.anim.view_anim_set);
        animationSet.setDuration(1000);

        imageView.startAnimation(animationSet);
    }

속성 애니메이션:
소개:
속성 애니메이션은 보기 애니메이션이 상호작용을 하지 않는 단점을 보완했다. 그 변화는 보기의 진실한 속성이다. 이렇게 하면 컨트롤과 응답 이벤트가 동기화될 수 있다.그러나 속성 애니메이션에도 사용할 조건이 있다. 즉, 조종할 View 대상의 속성 값을 바꾸려면view 대상에 해당하는 get과 set 방법이 있어야 한다.
ObjectAnimator에서 일반적으로 사용하는 속성:
  • translationX,translationY:view가 X, Y축에서 이동하는 거리를 제어하는 데 사용합니다.
  • X, Y:view 왼쪽 상단 모서리의 화면 좌표 원점 위치를 제어합니다.
  • rotation,rotationX,rotationY:rotation은view가 2D에서 회전하는 것을 제어할 뿐이다.rotationX, rotationY와 함께 사용하면 뷰가 3D에서 회전할 수 있습니다.
  • scaleX,scaleY:view가 수평 X와 세로 Y의 축소를 각각 제어
  • pivotX,pivotY:view의 축소를 제어하고 변환할 때의 중심점을 회전시킵니다. 기본적으로 이view의 중심점입니다.

    • 사용:
  • 조작하려는view에 대응하는 get과 set 방법이 있습니다:
  • ObjectAnimator 클래스를 통해 직접 조작 가능
  • 대응하는 get과 set 방법이 없으면 두 가지 해결 방법이 있다.
  • 필요한view를 자체포장하고 get과set방법을 자체포장
  • ValueAnimator를 사용하여view의 현재 각종 수치를 감청하여 수치에 대한 변화를 실현하고 애니메이션 효과를 실현한다.


    • 1. 해당하는 get 및 set 메서드가 있으며 Java 코드에서 직접 사용합니다.
    public void alpha(View view){
        //         
        ObjectAnimator alphaAnimation = ObjectAnimator.ofFloat(imageView,"alpha",0F);
        alphaAnimation.setRepeatMode(ValueAnimator.REVERSE);
        alphaAnimation.setRepeatCount(ValueAnimator.INFINITE);
        alphaAnimation.setDuration(3000);
        alphaAnimation.start();
    }

    public void translate(View view){
        //    
        ObjectAnimator translateAnimationX = ObjectAnimator.ofFloat(imageView,"translationX",300);
        ObjectAnimator translateAnimationY = ObjectAnimator.ofFloat(imageView,"translationY",300);
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setDuration(2000);
        animatorSet.playTogether(translateAnimationX,translateAnimationY);
        animatorSet.start();
    }

    public void rotate(View view){
        //    
        //    2D  
       ObjectAnimator rotateAnimation = ObjectAnimator.ofFloat(imageView,"rotationX",30);
        //      3D  
       ObjectAnimator rotateAnimationX = ObjectAnimator.ofFloat(imageView,"rotationX",30);
       ObjectAnimator rotateAnimationY = ObjectAnimator.ofFloat(imageView,"rotationY",60);
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setDuration(2000);
        animatorSet.playTogether(rotateAnimationX,rotateAnimationY);
        animatorSet.start();
    }

    public void scale(View view){
        //    
        ObjectAnimator scaleAnimationX = ObjectAnimator.ofFloat(imageView,"scaleX",0.5F);
        ObjectAnimator scaleAnimationY = ObjectAnimator.ofFloat(imageView,"scaleY",2F);
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setDuration(3000);
        animatorSet.playTogether(scaleAnimationX, scaleAnimationY);
        animatorSet.start();
    }

    public void set(View view){
        //         
        //      3D  
        ObjectAnimator rotateAnimationX = ObjectAnimator.ofFloat(imageView,"rotationX",30);
        ObjectAnimator rotateAnimationY = ObjectAnimator.ofFloat(imageView,"rotationY",60);
        //     
        ObjectAnimator alphaAnimation = ObjectAnimator.ofFloat(imageView,"alpha",0F);
        alphaAnimation.setRepeatMode(ValueAnimator.REVERSE);
        alphaAnimation.setRepeatCount(ValueAnimator.INFINITE);
        alphaAnimation.setDuration(3000);

        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setDuration(3000);
        animatorSet.playTogether(rotateAnimationX, rotateAnimationY,alphaAnimation);
        animatorSet.start();
    }

    2. 대응하는 get과 set 방법이 없고 포장된view 클래스를 사용합니다:
    /**
  *    view 
  */
    private static class WarpperView{
        private View mView;

        public WarpperView(View mView) {
            this.mView = mView;
        }

        public int getWidth(){
            return mView.getLayoutParams().width;
        }

        public int getHeight(){
            return mView.getLayoutParams().height;
        }
    }

    사용할 때 작업할view를 WrapperView에 직접 전달하고 WrapperView에 대응하는 get과 set 방법을 추가합니다. ObjectAnimator를 통해 WrapperView의 실례 대상을 직접 조작하면 됩니다.
    WarpperView warpperView = new WarpperView(imageView);
    ObjectAnimator objectAnimator = ObjectAnimator.ofInt(warpperView, "width", 500);
    objectAnimator.start();

    3. 해당 get 및 set 메서드가 없으며 ValueAnimator를 사용합니다.
    ValueAnimator는 사실 뷰에 직접적으로 애니메이션 효과를 내는 것은 아니지만 애니메이션에 필요한 수치를 제공할 수 있다. 예를 들어 하나의 수치 발생기와 같이 애니메이션 과정에서 수치의 변화를 감청하여view에 현재 디스플레이 상태를 설정할 수 있다.
        public void anim(View view) {
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(100,0);
        valueAnimator.setTarget(imageViewe);
        valueAnimator.setDuration(1000).start();
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                //        valueAnimator     ，         view,    imageView Y     
                float value = (float) animation.getAnimatedValue();
                imageViewe.setTranslationY(value);

            }
        });
    }

    속성 애니메이션의 조합:
    보기 애니메이션과 마찬가지로 우리는 여러 가지 속성 애니메이션을 동시에 조합하여 더욱 다채로운 애니메이션 효과를 실현할 수 있다.
    방법 1: PropertyValuesHolder를 사용하여 다음을 수행합니다.
    PropertyValuesHolder pvh1 = PropertyValuesHolder.ofFloat("translationX", 300f);
        PropertyValuesHolder pvh2 = PropertyValuesHolder.ofFloat("translationY", 500f);
        PropertyValuesHolder pvh3 = PropertyValuesHolder.ofFloat("alpha", 0.5f);

        ObjectAnimator.ofPropertyValuesHolder(pvh1, pvh2, pvh3).setDuration(1000).start();

    방법 2: AnimatorSet 사용:
    ObjectAnimator translateAnimationX = ObjectAnimator.ofFloat(imageView,"translationX",300);
        ObjectAnimator translateAnimationY = ObjectAnimator.ofFloat(imageView,"translationY",300);
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setDuration(2000);
        animatorSet.playTogether(translateAnimationX,translateAnimationY);
        animatorSet.start();

    애니메이션을 여러 개 생성한 다음 AnimatorSet에 배치할 수 있습니다. AnimatorSet 클래스는 다음과 같은 여러 가지 방법으로 애니메이션의 재생을 제어합니다.
  • 함께 재생:playTogether()
  • 순서 재생:playSequentially ()
  • animSet.play().with()
  • animSet.play().before()
  • animSet.play().after()

    • 방법 3: 속성 애니메이션의 자동 제어 특성을 사용합니다.
    ObjectAnimator의 setStartDelay () 를 통해 애니메이션을 자동으로 구동합니다.
    alphaAnimation.setStartDelay();

    XML에서 속성 애니메이션을 정의하려면 다음과 같이 하십시오.
    마찬가지로 보기 애니메이션과 마찬가지로 속성 애니메이션도 XML 파일에서 정의할 수 있으며 사용할 때 정의된 애니메이션을 직접 불러옵니다.그림% 1개의 캡션을 편집했습니다.
    [천장] 안드로이드 스킨 교체(테마) 용이
    새로운 자세를 게을리하여 RecyclerView에 속하는 만능 어댑터 어댑터와 ViewHolder를 만듭니다

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage