[Android]动画

左手的ㄟ右手 2024-03-29 15:36 0阅读 0赞

#### 1.理解 ####

--------------------

*  动画有下面两种情况

同一个图形通过视图在界面上进行透明度，缩放，旋转，平移的变化（View动画）

在界面的同一个位置上不断切换显示不同的图片（Drawable动画）

*  动画的分类

1.  View Animation
2.  Drawable Animation

*  Android中提供了两种实现动画的方式

1.  纯编码的方式
2.  xml配置的方式

#### 2.使用动画 ####

--------------------

**1）View动画的分类**

*  单一动画

1.  缩放动画（ScaleAnimation)
2.  旋转动画（RotateAnimation）
3.  透明度动画（AlphaAnimation)
4.  平移动画（TranslateAnimation）

*  复合动画

1.  由多个单一动画组合在一起的动画

**2）View动画的使用**

Animation的公用功能

*  setDuration(long durationMillis):设置持续时间（单位ms）
 *  setStartOffset(long startOffset):设置开始的持续的时间（单位ms）
 *  setFillBefore（boolean fillBefore):设置最终是否固定在起始状态
 *  setFillAfter（boolean fillAfter):设置最终是否固定在最后的状态
 *  setAnimationListener（AnimationListener listener):设置动画监听
 *  坐标类型

1.  Animation.ABSOLUTE：数值（默认以px为单位）
2.  Animation.RELATIVE\_TO\_SELF：百分数，如50%（以当前视图的宽度和高度其为基数来计算）
3.  Animation.RELATIVE\_TO\_PARENT：百分数+p，如：50%p（以父视图的宽度和高度其为基数来计算）

*  启动动画

view.startAnimation(animation)

*  结束动画

view.clearAnimation()

*  动画监听器：AnimationListener

1.  onAnimationStart(Animation animation):动画开始的回调
2.  onAnimationEnd(Animation animation):动画结束的回调
3.  onAnimationRepeat(Animation animation)：动画重复执行

2.如何指定坐标（中心点，起始点，目标点）

a.坐标系的原点：视图的左上角

b.代码 n

绝对：n px

相对于自己：viewWidth\*n px

相对于父亲：parentViewWidth\*n px

c.xml

n：绝对类型，n px

n%：相对于自己类型，viewWidth\*n% px

n%p：相对于父亲类型：parentViewWidth\*n% px

#### **使用Drawable动画** ####

--------------------

1.缩放动画（ScaleAnimation)

public ScaleAnimation(float fromX, float toX, float fromY, float toY,
            int pivotXType, float pivotXValue, int pivotYType, float pivotYValue) {

/*ScaleAimation缩放动画（代码）
        * 1.创建动画对象
        * 2.设置
        * 3.启动动画
        * */
        fun startCodeScale(){
            textView.text="Code缩放动画：宽度从0.0到1.0，高度从0.0到1.0，缩放的圆心为顶部中心点，延迟1s开始，持续5s，最终还原"
            var animation=ScaleAnimation(0f,1f,0f,1f,Animation.ABSOLUTE,
                (img.width/2).toFloat(),Animation.ABSOLUTE,0f)
            animation.startOffset=1000
            animation.duration=5000
            animation.fillBefore=true
            img.startAnimation(animation)
    
        }

/*ScaleAimation缩放动画（xml文件方式）
        * 1.定义动画文件
        * 2.加载动画文件得到动画对象
        * 3.启动动画
        * */
        @SuppressLint("ResourceType")
        fun startXmlScale(){
            textView.text="Xml缩放动画：宽度从0.0到1.0，高度从0.0到1.0，缩放的圆心为右下角，延迟1s开始，持续5s，最终还原"
            var animation:Animation=AnimationUtils.loadAnimation(this,R.xml.scale)
            img.startAnimation(animation)
        }

<?xml version="1.0" encoding="utf-8"?>
    <scale xmlns:android="http://schemas.android.com/apk/res/android"
      android:fromXScale="0"
        android:fromYScale="0"
        android:toXScale="1"
        android:toYScale="1"
        android:startOffset="1000"
        android:duration="3000"
        android:pivotX="100%"
        android:pivotY="100%"
        android:fillAfter="true">
    </scale>

2. 旋转动画（RotateAnimation）

public RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue,
            int pivotYType, float pivotYValue) {

/*
        * RotateAnimation旋转动画（代码）
        * */
        fun startCodeRotate(){
            textView.text="Code旋转动画：以图片中心点为中心，从负90度到正90度，持续5s"
            var animation:RotateAnimation=RotateAnimation(-90f,+90f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f)
            animation.duration=5000
            img.startAnimation(animation)
        }
        /*
        * RotateAnimation旋转动画（xml）
        * */
        @SuppressLint("ResourceType")
        fun startXmlRotate(){
            textView.text="Xml旋转动画：以左顶点为坐标，从负90度到正90度，持续5s"
            var animation:Animation=AnimationUtils.loadAnimation(this,R.xml.rotate)
            img.startAnimation(animation)
        }

<?xml version="1.0" encoding="utf-8"?>
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromDegrees="90"
        android:toDegrees="-90"
        android:duration="5000"
        android:pivotX="0%"
        android:pivotY="0%"
        >
    
    </rotate>

3. 透明度动画（AlphaAnimation)

public AlphaAnimation(float fromAlpha, float toAlpha)

/*
        * AlphaAnimation透明度动画（代码）
        * */
        fun startCodeAlpha(){
            textView.text="Code透明度动画：从完全透明到完全不透明，持续5s"
            var animation:Animation=AlphaAnimation(0f,1f)
            animation.duration=5000
            img.startAnimation(animation)
        }
        @SuppressLint("ResourceType")
        fun startXmlAlpha(){
            textView.text="Xml透明度动画：从完全不透明到完全透明，持续5s"
            var animation=AnimationUtils.loadAnimation(this,R.xml.alpha)
            img.startAnimation(animation)
    
        }

<?xml version="1.0" encoding="utf-8"?>
    <alpha xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromAlpha="1"
        android:toAlpha="0"
        android:duration="5000"
        >
    </alpha>

4. 平移动画（TranslateAnimation）

public TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue,
            int fromYType, float fromYValue, int toYType, float toYValue)

/*TranslateAnimation平移动画(代码)
        * */
        fun startCodeTranslate(){
            textView.text="Code移动动画：向右移动一个自己的宽度，向下移动一个自己的高度，持续2s"
            var animation=TranslateAnimation(Animation.ABSOLUTE,0f,Animation.RELATIVE_TO_SELF,1f,Animation.ABSOLUTE,0f,Animation.RELATIVE_TO_SELF,1f)
            animation.duration=5000
            img.startAnimation(animation)
        }
        /*TranslateAnimation平移动画(xml)
        * */
        @SuppressLint("ResourceType")
        fun startXmlTranslate(){
            textView.text="Xml移动动画：从屏幕的右边逐渐回到原来的位置，持续2s"
            var animation=AnimationUtils.loadAnimation(this,R.xml.translate)
            img.startAnimation(animation)
        }

<?xml version="1.0" encoding="utf-8"?>
    <translate xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromXDelta="100%f"
        android:toXDelta="0f"
        android:fromYDelta="0f"
        android:toYDelta="0f"
        android:druation="2000"
        >
    
    </translate>

5. 复合动画

/*AnimationSet复合动画(代码)
        * 1.创建透明动画并设置
        * 2.创建旋转动画并设置
        * 3.创建复合动画并设置
        * 4.添加两个动画
        * 5.启动复合动画对象
        * */
        private fun startCodeAnimationSet(){
            textView.text="Code复合动画：通明度从透明到不透明，持续2s，接着进行旋转360度的动画，持续1s"
             var alphaAnimation=AlphaAnimation(0f,1f)
            alphaAnimation.duration=2000
            var rotateAnimation=RotateAnimation(0f,360f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f)
            rotateAnimation.duration=1000
            rotateAnimation.startOffset=2000
            var animationSet=AnimationSet(true)
            animationSet.addAnimation(alphaAnimation)
            animationSet.addAnimation(rotateAnimation)
            img.startAnimation(animationSet)
        }
        @SuppressLint("ResourceType")
        fun startXmlAnimationSet(){
            textView.text="Code复合动画：通明度从透明到不透明，持续2s，接着进行旋转360度的动画，持续1s"
            var animation=AnimationUtils.loadAnimation(this,R.xml.set)
            img.startAnimation(animation)
        }

<?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
        <alpha
            android:druation="2000"
            android:fromAlpha="0.0"
            android:toAlpha="1.0"
        />
        <rotate
            android:druation="1000"
            android:fromDegrees="0"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toDegrees="360"
        />
    </set>

6.动画监听

@SuppressLint("ResourceType")
        fun test(){
            textView.text="Xml旋转动画：以左顶点为坐标，从负90度到正90度，持续5s"
            var animation:Animation=AnimationUtils.loadAnimation(this,R.xml.rotate)
            animation.repeatCount=3//重复三次
            img.startAnimation(animation)
        }

7.在界面的同一个位置上不断切换显示不同的图片

<?xml version="1.0" encoding="utf-8"?>
    <animation_list xmlns:android="http://schemas.android.com/apk/res/android"
        android:oneshot="false"
        >
        <item android:drawable="@drawable/img1" android:duration="500"/>
        <item android:drawable="@drawable/img2" android:duration="500"/>
        <item android:drawable="@drawable/img3" android:duration="500"/>
        <item android:drawable="@drawable/img4" android:duration="500"/>
    </animation_list>

####  ####