[学习笔记]用户界面优化-Android自定义视图动画

最新推荐文章于 2022-11-13 20:00:00 发布

神是念着倒

最新推荐文章于 2022-11-13 20:00:00 发布

阅读量393

点赞数

分类专栏： Android 文章标签：自定义视图动画

Android 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

以下内容纯粹为本人学习笔记【记录】之用，所听课程(Q群群友百度网盘提供)为极客学院一位老师所讲（老师大名我尚未知晓），如有侵权请告知。在此特别感谢这位老师录制的视频资料。

需要使用的类或API是Animation
http://tool.oschina.net/apidocs/apidoc?api=android/reference
本文导读：
一、透明动画效果
二、旋转动画效果
三、移动动画效果
四、缩放动画效果
五、自定义动画效果

一、透明动画效果
MainActivity.java

package com.keen.learnanimation;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.AnimationUtils;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    private Button btnAniMe;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btnAniMe = (Button) findViewById(R.id.btnAniMe);
        btnAniMe.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                AlphaAnimation aa = new AlphaAnimation(0, 1);
                aa.setDuration(1000);//设置动画时间长度
                view.startAnimation(aa);
            }
        });
    }
}

activity_main.xml添加一个按钮

    <Button
        android:id="@+id/btnAniMe"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Animate Me" />

这里写图片描述

二、旋转动画效果
MainActivity.java

public class MainActivity extends AppCompatActivity {

    private RotateAnimation ra;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

//        ra = new RotateAnimation(0, 360, 100, 50);
        ra = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        ra.setDuration(1000);

        findViewById(R.id.btnRotateMe).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                view.startAnimation(ra);
            }
        });
    }

xml文件即添加按钮，用于显示旋转

    <Button
        android:id="@+id/btnRotateMe"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Rotate Me" />

这里写图片描述

三、移动动画效果
第1种方式
MainActivity.java

package com.keen.l04translateanimation;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.AnimationUtils;
import android.view.animation.TranslateAnimation;

public class MainActivity extends AppCompatActivity {
    private TranslateAnimation ta;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ta = new TranslateAnimation(0, 200, 0, 200);
        //不是从父级容器中的位置移动200，而是基于它自身当前位置移动一个增量
        ta.setDuration(1000);

        findViewById(R.id.btnTranslate).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                view.startAnimation(ta);
//                view.startAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.transition.ta));
            }
        });
    }
}

activity_main.xml文件添加一个按钮

    <Button
        android:id="@+id/btnTranslate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello Translate" />

第2种方式，通过创建xml文件达到这种移动动画效果，即将配置都放置在xml文件里
这里写图片描述

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0"
    android:toXDelta="200"
    android:fromYDelta="0"
    android:toYDelta="200"
    android:duration="1000">

</translate>

而MainActivity.java的onCreate()点击事件里只需添加一句

@Override
            public void onClick(View view) {
                view.startAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.transition.ta));
            }

两种方式的效果是一样的。
这里写图片描述

四、缩放动画效果
MainActivity.java

package com.keen.l05scaleanimation;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.ScaleAnimation;

public class MainActivity extends AppCompatActivity {
    private ScaleAnimation sa;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

//        sa = new ScaleAnimation(0, 1, 0, 1, 100, 50);//默认从左上角开始缩放
        sa = new ScaleAnimation(0, 1, 0, 1, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);//以自身为中心开始缩放
        sa.setDuration(1000);
        findViewById(R.id.btnScale).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                view.startAnimation(sa);
            }
        });
    }
}

对应的activity_main.xml添加这个按钮

    <Button
        android:id="@+id/btnScale"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Scale me" />

当然也可以将缩放配置写到xml文件里，选择type为scale

动画效果混合：如透明度、移动效果.
MainActivity.java

package com.keen.learnanim;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.AnimationSet;
import android.view.animation.TranslateAnimation;

public class MainActivity extends AppCompatActivity {
    private AnimationSet as;//set是集合，含多个混合动画效果

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        as = new AnimationSet(true);
        as.setDuration(1000);

        AlphaAnimation aa = new AlphaAnimation(0, 1);//透明效果
        aa.setDuration(1000);
        as.addAnimation(aa);

        TranslateAnimation ta = new TranslateAnimation(200, 0 , 200, 0);//移动效果
        ta.setDuration(1000);
        as.addAnimation(ta);

        findViewById(R.id.btnAnimate).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
               view.startAnimation(as);
            }
        });
    }
}

对应的activity_main.xml文件添加这个按钮

    <Button
        android:id="@+id/btnAnimate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Animate" />

这里写图片描述

监听动画效果
即setAnimationListener()，里头有start/end/repeat

首先将动画效果配置为anim.xml文件

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:shareInterpolator="true"
    android:id="@+id/anim"
    >

    <alpha
        android:fromAlpha="0"
        android:toAlpha="1" />

    <translate
        android:fromXDelta="200"
        android:fromYDelta="200"
        android:toXDelta="0"
        android:toYDelta="0" />

</set>

MainActivity.java修改为

package com.keen.learnanim;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        findViewById(R.id.btnAnimate).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Animation a = AnimationUtils.loadAnimation(MainActivity.this, R.animator.anim);
                //监听动画效果
                a.setAnimationListener(new Animation.AnimationListener() {
                    @Override
                    public void onAnimationStart(Animation animation) {

                    }

                    @Override
                    public void onAnimationEnd(Animation animation) {
                        Toast.makeText(MainActivity.this, "Animation end", Toast.LENGTH_SHORT).show();
                    }

                    @Override
                    public void onAnimationRepeat(Animation animation) {

                    }
                });
                view.startAnimation(a);
            }
        });
    }
}

自定义动画效果
因为透明、移动、缩放、旋转并不能满足需求，虽然可以组合、添加。所以需要自定义动画效果。
实例：抖动/摇摆（左右）
1）new一个类，用来实现自定义动画，CustomAnimation.java

package com.keen.learncustomanimation;

import android.view.animation.Animation;
import android.view.animation.Transformation;

public class CustomAnimation extends Animation{
    //获取目标对象的宽高、父级容器的宽高
    @Override
    public void initialize(int width, int height, int parentWidth,
                           int parentHeight) {
        System.out.println("init");
        super.initialize(width, height, parentWidth, parentHeight);
    }
    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        System.out.println(interpolatedTime);
//      t.setAlpha(interpolatedTime);//透明度
//        t.getMatrix().setTranslate(200, 200);//移动位置,1秒后回原位
//      t.getMatrix().setTranslate(200*interpolatedTime, 200*interpolatedTime);
        t.getMatrix().setTranslate((float) (Math.sin(interpolatedTime*10)*25), 0);//抖动/左右摇摆，用正弦函数，10是周期、25是振幅
        super.applyTransformation(interpolatedTime, t);
    }
}

2）MainActivity.java 应用这个自定义动画

package com.keen.learncustomanimation;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {
    private CustomAnimation ca;//声明

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ca = new CustomAnimation();//创建自定义动画效果
        ca.setDuration(1000);
        findViewById(R.id.btnCusAnim).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                view.startAnimation(ca);
            }
        });
    }
}

3）activity_main.xml添加一个按钮

    <Button
        android:id="@+id/btnCusAnim"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Custom Animate"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="166dp" />

这里写图片描述

参考文章：android xml之动画篇 alpha、scale、translate、rotate、set的属性及用法
http://blog.csdn.net/u013424496/article/details/51144171

神是念着倒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[学习笔记]用户界面优化-Android自定义视图动画

以下内容纯粹为本人学习笔记【记录】之用，所听课程(Q群群友百度网盘提供)为极客学院一位老师所讲（老师大名我尚未知晓），如有侵权请告知。在此特别感谢这位老师录制的视频资料。需要使用的类或API是Animation http://tool.oschina.net/apidocs/apidoc?api=android/reference 本文导读：一、透明动画效果二、旋转动画效果三、移动
复制链接

扫一扫

专栏目录