Android Animation preliminary

Generally speaking Animation can be divided into two categories:

  1. Tweened Animations: This class provides the rotational movement, stretching, fading and other effects

  2. Frame-By-Frame Animations: Drawable class can create a sequence of these Drawable can be spaced a display in accordance with a specified event, and almost cartoon

一、Tweened Animations

Tweened Animations There are four types:

  1. Alpha: fade effect

  2. Scale: zoom effect

  3. Rotate: rotate effect

  4. Translate: motion effects

Animate can be set in the XML file, you can also set up in Java code. Let's explain how to set up these four animation in Java code

Animate Java code steps:

  1. Creating a AnimationSet objects (AnimationSet store is a collection of more than Animations)

  2. Animation create the corresponding objects as required

  3. Value set for each attribute of objects needed Animation

  4. Adding Animation object to object AnimationSet

  5. Use controls startAnimation () method performs AnimationSet

Java code common attributes:

  • setDuration (long durationMillis): set the duration of the animation events (Unit: ms)

  • setFillAfter (boolean fillAfter): If fillAfter true, the animation execution, control will remain in the end of the animation state

  • setFillBefore (boolean fillBefore): If fillBefore true, the animation execution, control will return to the state of the animation begins

  • setStartOffset (long startOffset): set the time to wait before the animation execution (Unit: ms)

  • setRepeatCount (int repeatCount): animate the number of repetitions

  • setInterpolator (Interpolator i): set the rate of change of the animation

setInterpolator (new AccelerateDecelerateInterpolator ()): accelerated and decelerates

setInterpolator(new AccelerateInterpolator()):加速

setInterpolator(new DecelerateInterpolator()):减速

setInterpolator (new CycleInterpolator ()): a particular animation loop frequency rate changes along a sine curve

setInterpolator(new LinearInterpolator()):匀速

Animation and other special effects

Animate Java code Demo (AnimationDemo01):

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dip"
        android:src="@drawable/ic_launcher" />
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="bottom"
        android:orientation="vertical" >
        <Button
            android:id="@+id/alphaButton"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="测试alpha动画效果" />
        <Button
            android:id="@+id/scaleButton"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="测试scale动画效果" />
        <Button
            android:id="@+id/rotateButton"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="测试rotate动画效果" />
        <Button
            android:id="@+id/translateButton"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="测试translate动画效果" />
    </LinearLayout>
</LinearLayout>
AnimationDemoActivity.java
package com.tianjf;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;
public class AnimationDemoActivity extends Activity implements OnClickListener {
    private ImageView mImageView;
    private Button mAlphaButton;
    private Button mScaleButton;
    private Button mRotateButton;
    private Button mTranslateButton;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mImageView = (ImageView) findViewById(R.id.imageView);
        mAlphaButton = (Button) findViewById(R.id.alphaButton);
        mScaleButton = (Button) findViewById(R.id.scaleButton);
        mRotateButton = (Button) findViewById(R.id.rotateButton);
        mTranslateButton = (Button) findViewById(R.id.translateButton);
        mAlphaButton.setOnClickListener(this);
        mScaleButton.setOnClickListener(this);
        mRotateButton.setOnClickListener(this);
        mTranslateButton.setOnClickListener(this);
    }
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.alphaButton:
            // 创建一个AnimationSet对象(AnimationSet是存放多个Animations的集合)
            AnimationSet animationSet = new AnimationSet(true);
            // 创建一个AlphaAnimation对象(参数表示从完全不透明到完全透明)
            AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0);
            // 设置动画执行的时间(单位:毫秒)
            alphaAnimation.setDuration(1000);
            // 将AlphaAnimation对象添加到AnimationSet当中
            animationSet.addAnimation(alphaAnimation);
            // 使用ImageView的startAnimation方法开始执行动画
            mImageView.startAnimation(animationSet);
            break;
        case R.id.scaleButton:
            // 创建一个AnimationSet对象(AnimationSet是存放多个Animations的集合)
            animationSet = new AnimationSet(true);
            // 创建一个ScaleAnimation对象(以某个点为中心缩放)
            ScaleAnimation scaleAnimation = new ScaleAnimation(1, 0.1f, 1, 0.1f,
                    Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
            // 设置动画执行之前等待的时间(单位:毫秒)
            scaleAnimation.setStartOffset(1000);
            // 设置动画执行的时间(单位:毫秒)
            scaleAnimation.setDuration(2000);
            // 如果fillAfter设为true,则动画执行后,控件将停留在动画结束的状态
            // 运行了一下发现以下奇怪的现象
            // scaleAnimation.setFillAfter(true);不会停留在动画结束的状态
            // animationSet.setFillAfter(true);则会停留在动画结束的状态
            animationSet.setFillAfter(true);
                        // 将ScaleAnimation对象添加到AnimationSet当中
                       &nbsp;animationSet.addAnimation(scaleAnimation);
                        // 使用ImageView的startAnimation方法开始执行动画
&nbsp;                       mImageView.startAnimation(animationSet);
            break;
        case R.id.rotateButton:
            // 创建一个AnimationSet对象(AnimationSet是存放多个Animations的集合)
            animationSet = new AnimationSet(true);
            // 创建一个RotateAnimation对象(以某个点为圆心旋转360度)
            RotateAnimation rotateAnimation = new RotateAnimation(0, 360,
                    Animation.RELATIVE_TO_PARENT, 0.5f, Animation.RELATIVE_TO_PARENT, 0.25f);
            // 设置动画执行的时间(单位:毫秒)
            rotateAnimation.setDuration(5000);
            // 将RotateAnimation对象添加到AnimationSet当中
            animationSet.addAnimation(rotateAnimation);
            // 使用ImageView的startAnimation方法开始执行动画
            mImageView.startAnimation(animationSet);
            break;
        case R.id.translateButton:
            // 创建一个AnimationSet对象(AnimationSet是存放多个Animations的集合)
            animationSet = new AnimationSet(true);
            // 创建一个RotateAnimation对象(从某个点移动到另一个点)
            TranslateAnimation translateAnimation = new TranslateAnimation(
                    Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0.5f,
                    Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 1.0f);
            // 设置动画执行的时间(单位:毫秒)
            translateAnimation.setDuration(1000);
            // 将TranslateAnimation对象添加到AnimationSet当中
            animationSet.addAnimation(translateAnimation);
            // 使用ImageView的startAnimation方法开始执行动画
            mImageView.startAnimation(animationSet);
            break;
        default:
            break;
        }
    }
}
AlphaAnimation very simple, not much said, looking directly at the code comments

The remaining 3 animation effects are related to the issue of a reference point, let's explain one by one

RotateAnimation used in the creation of Animation.RELATIVE_TO_PARENT (expressed as parent control as a reference), in addition to two kinds of reference: Animation.RELATIVE_TO_SELF (on its own as a reference), Animation.ABSOLUTE (absolute coordinates, there is no reference)

Take Animation.RELATIVE_TO_PARENT we explain to draw in the end RotateAnimation rotating center where?

Example, X-axis control is provided relative to the parent, the value is 0.5f; Y-axis control is provided relative to the parent, the value is 0.25f. In other words, the center is the height 0.5 Ge width and 0.25 of the parent control parent control

Then, the control center revolves around the figure, the rotation from 0 ° to 360 ° (if it is 0, -360, then the rotation is 0 ° to -360 [deg.])

With parent control as a reference to understand the words to refer to itself as it can judge the whole.

ScaleAnimation parameters created explanation: zoom center point may be calculated according to the above method, the reduced image size is 0.1 itself width, height 0.1 itself, corresponding to 90% reduction

TranslateAnimation的创建的参数的解释:参数主要是决定移动的起始点和终了点,计算方法参考上文

上面的Java代码设置动画效果有一个缺点:代码的可复用性很低,不利于维护。为了维护,可以使用XML来设置动画效果

XML中设置动画效果的步骤:

  1. 在res文件夹下新建一个名为anim的文件夹

  2. 创建xml文件,并首先加入set标签(set标签就相当于Java代码中的AnimationSet)

  3. 在Set标签中加入alpha,scale,rotate,translate标签(相当于Java代码中的AlphaAnimation,ScaleAnimation,RotateAnimation,TranslateAnimation)

  4. 在Java代码中使用AnimationUtils的loadAnimation方法来加载XML文件,并得到一个Animation对象

  5. 使用控件的startAnimation()方法执行这个Animation对象

XML中的通用属性:

  • android:duration:设置动画持续事件(单位:毫秒)

  • android:fillAfter:如果fillAfter设为true,则动画执行后,控件将停留在动画结束的状态

  • android:fillBefore:如果fillBefore设为true,则动画执行后,控件将回到动画开始的状态

  • android:startOffset(long startOffset):设置动画执行之前等待的时间(单位:毫秒)

  • android:repeatCount(int repeatCount):设置动画重复的次数

  • android:interpolator:设置动画的变化速度

android:interpolator="@android :anim/accelerate_decelerate_interpolator":先加速,后减速

android:interpolator="@android :anim/accelerate_interpolator":加速

android:interpolator="@android :anim/decelerate_interpolator":减速

android:interpolator="@android :anim/cycle_Interpolator":动画循环播放特定次数,速率改变沿着正弦曲线

android:interpolator="@android :anim/linear_Interpolator":匀速

以及其他一些特定的动画效果

XML中设置动画效果的Demo(AnimationDemo02):


main.xml

同上

alpha.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator" >
    <alpha
        android:duration="500"
        android:fromAlpha="1.0"
        android:startOffset="500"
        android:toAlpha="0.0" />
</set>
rotate.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator" >
    <rotate
        android:duration="5000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="360" />
</set>
scale.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator" >
    <scale
        android:duration="2000"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0.0"
        android:toYScale="0.0" />
</set>
translate.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator" >
    <translate
        android:duration="2000"
        android:fromXDelta="50%"
        android:fromYDelta="0%"
        android:toXDelta="100%"
        android:toYDelta="100%" />
</set>
AnimationDemoActivity.java
package com.tianjf;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;
public class AnimationDemoActivity extends Activity implements OnClickListener {
    private ImageView mImageView;
    private Button mAlphaButton;
    private Button mScaleButton;
    private Button mRotateButton;
    private Button mTranslateButton;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mImageView = (ImageView) findViewById(R.id.imageView);
        mAlphaButton = (Button) findViewById(R.id.alphaButton);
        mScaleButton = (Button) findViewById(R.id.scaleButton);
        mRotateButton = (Button) findViewById(R.id.rotateButton);
        mTranslateButton = (Button) findViewById(R.id.translateButton);
        mAlphaButton.setOnClickListener(this);
        mScaleButton.setOnClickListener(this);
        mRotateButton.setOnClickListener(this);
        mTranslateButton.setOnClickListener(this);
    }
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.alphaButton:
            Animation alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.alpha);
            mImageView.startAnimation(alphaAnimation);
            break;
        case R.id.scaleButton:
            Animation scaleAnimation = AnimationUtils.loadAnimation(this, R.anim.scale);
            mImageView.startAnimation(scaleAnimation);
            break;
        case R.id.rotateButton:
            Animation rotateAnimation = AnimationUtils.loadAnimation(this, R.anim.rotate);
            mImageView.startAnimation(rotateAnimation);
            break;
        case R.id.translateButton:
            Animation translateAnimation = AnimationUtils.loadAnimation(this, R.anim.translate);
            mImageView.startAnimation(translateAnimation);
            break;
        default:
            break;
        }
    }
}
关于属性的讲解,已经在AnimationDemo01中讲解过了,在此就不再重复了。


值得一提的是,AnimationDemo01中出现的绝对定位(Animation.ABSOLUTE),相对于自身定位(Animation.RELATIVE_TO_SELF),相对于父控件定位(Animation.RELATIVE_TO_PAREN),在XML文件中用XX(绝对),XX%(相对于自身),XX%p(相对于父控件)


上面两个例子都有一个类叫:AnimationSet(XML文件中是set标签),这个AnimationSet就相当于一个集合,可以存放一个或多个Animation对象,如果我们对AnimationSet设置属性值,那么,这些属性值将应用到AnimationSet下的所有Animation对象中去。



二、Frame-By-Frame Animations


直接上代码(AnimationDemo03)

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dip" />
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="bottom"
        android:orientation="vertical" >
        <Button
            android:id="@+id/frameByFrameButton"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="测试Frame-By-Frame动画效果" />
    </LinearLayout>
</LinearLayout>
anim_nv.xml
<?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/nv1"
        android:duration="500"/>
    <item
        android:drawable="@drawable/nv2"
        android:duration="500"/>
    <item
        android:drawable="@drawable/nv3"
        android:duration="500"/>
    <item
        android:drawable="@drawable/nv4"
        android:duration="500"/>
</animation-list>
AnimationDemoActivity.java
package com.tianjf;
import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
public class AnimationDemoActivity extends Activity implements OnClickListener {
    private ImageView mImageView;
    private Button mFrameByFrameButton;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mImageView = (ImageView) findViewById(R.id.imageView);
        mFrameByFrameButton = (Button) findViewById(R.id.frameByFrameButton);
        mFrameByFrameButton.setOnClickListener(this);
    }
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.frameByFrameButton:
            // 为ImageView设置背景资源
            mImageView.setBackgroundResource(R.drawable.anim_nv);
            // 通过ImageView得到AnimationDrawable
            AnimationDrawable animationDrawable = (AnimationDrawable) mImageView.getBackground();
            // 开始执行动画
            animationDrawable.start();
            break;
        default:
            break;
        }
    }
}


三、LayoutAnimationController

什么是LayoutAnimationController呢?LayoutAnimationController用于为一个Layout里面的一组控件设置相同的动画效果,并可以控制这一组动画在不同的时间出现


LayoutAnimationController可以在XML中设置,也可在Java代码中设置

先看一个在XML中设置的Demo(AnimationDemo04)

list_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:shareInterpolator="true" >
    <alpha
        android:duration="2000"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
</set>
list_anim_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
    android:delay="1"
    android:animationOrder="normal"
    android:animation="@anim/list_anim" />
main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <ListView
        android:id="@id/android:list"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layoutAnimation="@anim/list_anim_layout"
        android:scrollbars="vertical"
        android:visibility="gone" />
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="bottom"
        android:orientation="vertical" >
        <Button
            android:id="@+id/button"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="测试LayoutAnimation动画效果" />
    </LinearLayout>
</LinearLayout>
item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    android:paddingBottom="1dip"
    android:paddingLeft="10dip"
    android:paddingRight="10dip"
    android:paddingTop="1dip" >
    <TextView
        android:id="@+id/user_name"
        android:layout_width="180dip"
        android:layout_height="30dip"
        android:singleLine="true"
        android:textSize="20dip" />
    <TextView
        android:id="@+id/user_gender"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:singleLine="true"
        android:textSize="20dip" />
</LinearLayout>
AnimationDemoActivity.java
package com.tianjf;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import android.app.ListActivity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ListAdapter;
import android.widget.ListView;
import android.widget.SimpleAdapter;
public class AnimationDemoActivity extends ListActivity implements OnClickListener {
    private ListView mListView;
    private Button mButton;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mListView = getListView();
        mButton = (Button) findViewById(R.id.button);
        mListView.setAdapter(buildListAdapter());
        mButton.setOnClickListener(this);
    }
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.button:
            mListView.setVisibility(View.VISIBLE);
            break;
        default:
            break;
        }
    }
    private ListAdapter buildListAdapter() {
        List<HashMap<String, String>> list = new ArrayList<HashMap<String, String>>();
        HashMap<String, String> m1 = new HashMap<String, String>();
        m1.put("user_name", "张三");
        m1.put("user_gender", "女");
        HashMap<String, String> m2 = new HashMap<String, String>();
        m2.put("user_name", "李四");
        m2.put("user_gender", "女");
        HashMap<String, String> m3 = new HashMap<String, String>();
        m3.put("user_name", "王五");
        m3.put("user_gender", "男");
        list.add(m1);
        list.add(m2);
        list.add(m3);
        SimpleAdapter simpleAdapter = new SimpleAdapter(this, list, R.layout.item, new String[] {
                "user_name", "user_gender" }, new int[] { R.id.user_name, R.id.user_gender });
        return simpleAdapter;
    }
}
layoutAnimation标签中的android:animationOrder属性就是设置动画的显示顺序的,normal就是依次显示出来


如果要在Java代码中设置LayoutAnimation,可以按照如下设置

删掉list_anim_layout.xml文件,删掉main.xml下的ListView的android:layoutAnimation属性,最后,在OnClick方法里面加上如下代码:

Animation animation = (Animation) AnimationUtils.loadAnimation(this, R.anim.list_anim);
LayoutAnimationController lac = new LayoutAnimationController(animation);
lac.setOrder(LayoutAnimationController.ORDER_NORMAL);
lac.setDelay(0.5f);
mListView.setLayoutAnimation(lac);


四、AnimationListener

还可以为Animation对象添加AnimationListener监听器。监听动画执行的各阶段。


AnimationListener主要包含三个方法:

  1. onAnimationEnd:动画结束

  2. onAnimationStart:动画开始

  3. onAnimationRepet:动画重复


Original: http://blog.csdn.net/tianjf0514/article/details/7566304

Reproduced in: https: //my.oschina.net/lichen/blog/264881

Guess you like

Origin blog.csdn.net/weixin_34218890/article/details/91817387