Jadual Kandungan
scale动画?调节尺寸
alpha动画?调节透明度
rotate动画?旋转
translate动画?平移
Rumah hujung hadapan web html tutorial Android动画学习--Tween Animation_html/css_WEB-ITnose

Android动画学习--Tween Animation_html/css_WEB-ITnose

Jun 24, 2016 am 11:43 AM

目录

  • 目录
  • Android动画学习
  • Tween Animation
  • scale动画调节尺寸
  • alpha动画调节透明度
  • rotate动画旋转
  • translate动画平移
  • Android动画学习

    android中动画分为3种:

    1. Tween Animation:通过对场景里的对象不断做图像变换(平移、缩放、旋转)产生的动画效果,即是一种渐变动画。
    2. Frame Animation:顺序播放事先做好的图像,是一种画面转换动画。
    3. Property Animation:属性动画,通过动态地改变对象的属性从而达到动画效果,属性动画为API 11新特性。

    这篇博客主要来分析Tween Animation的基本使用。

    Tween Animation

    Tween Animation有四种形式:

    1. alpha : 渐变透明动画效果。
    2. scale : 渐变尺寸伸缩动画效果。
    3. translate : 画面位置移动动画效果。
    4. rotate : 画面旋转动画效果。

    这四种动画实现方式都是通过Animation类和AnimationUtils配合实现的。动画效果可以预先配置在res/anim目录下的xml文件中。

    scale动画?调节尺寸

    scale的参数如下:

  • android:fromXScale:起始的X方向上相对自身的缩放比例,浮点值。例如1.0代表无变化,0.5代表起始时虽小一倍,2.0代表放大一倍。
  • android:toXScale:结束时X方向上相对自身的缩放比例。
  • android:fromYScale:起始时Y方向上相对自身的缩放比例。
  • android:toYScale:结束时Y方向上相对自身的缩放比例。
  • android:pivotX:缩放起点X轴坐标,可以是数值、百分比、百分数三种形式。(注意:起点指的是当前View左上角的坐标)
  • android:pivotY:缩放起点Y轴坐标。
  • 此外,Animation类是所有动画(scale、alpha、translate、rotate)的基类,从Animation类继承的属性:

  • android:duration:动画持续时间,以毫秒为单位。
  • android:fillAfter:如果设置为true,控件动画结束时,将保持动画最后时的状态。
  • android:fillBefore:如果设置为true,控件动画结束后,还原到开机动画前的状态。
  • android:fillEnabled:与android:fillBefore的效果相同,都是在动画结束时将控件还原到初始状态。
  • android:repeatCount:重复次数
  • android:repeatMode:重复类型,有reverse和restart两个值,reverse表示倒序回放,restart表示重新放一遍。
  • 光说不练习是不行的,这里给出一个anim的xml文件、一个layout布局文件和一个Activity类,来练习一下scale animation的使用。

    res/anim/anim_scale.xml文件如下:

    <?xml version="1.0" encoding="utf-8"?><scale xmlns:android="http://schemas.android.com/apk/res/android" android:duration="700" android:fromXScale="0.0" android:fromYScale="0.0" android:pivotX="150" android:pivotY="300" android:toXScale="1.4" android:toYScale="1.4" android:fillAfter="true" android:repeatCount="10" android:repeatMode="reverse"></scale>
    Salin selepas log masuk

    res/layout/tween_animation_layout.xml文件如下:

    <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" >    <LinearLayout  android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" >        <Button  android:id="@+id/alpha_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="@string/alpha" />        <Button  android:id="@+id/scale_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="@string/scale" />        <Button  android:id="@+id/rotate_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="@string/rotate" />        <Button  android:id="@+id/trans_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="@string/trans" />    </LinearLayout>    <ImageView  android:id="@+id/anim_image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:contentDescription="@null" android:src="@drawable/splash_logo" /></LinearLayout>
    Salin selepas log masuk

    动画演示实现类实现如下:

    import com.example.photocrop.R;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 TweenAnimationTest extends Activity implements OnClickListener {    private Button alphaButton;    private Button scaleButton;    private Button rotateButton;    private Button transButton;    private ImageView animImageView;    @Override    protected void onCreate(Bundle savedInstanceState) {    // TODO Auto-generated method stub    super.onCreate(savedInstanceState);    setContentView(R.layout.tween_animation_layout);    initView();    }    private void initView() {    animImageView = (ImageView) findViewById(R.id.anim_image);    alphaButton = (Button) findViewById(R.id.alpha_button);    scaleButton = (Button) findViewById(R.id.scale_button);    rotateButton = (Button) findViewById(R.id.rotate_button);    transButton = (Button) findViewById(R.id.trans_button);    alphaButton.setOnClickListener(this);    scaleButton.setOnClickListener(this);    rotateButton.setOnClickListener(this);    transButton.setOnClickListener(this);    }    @Override    public void onClick(View v) {        switch (v.getId()) {    case R.id.alpha_button:        break;    case R.id.scale_button:        Animation animation = AnimationUtils.loadAnimation(this, R.anim.anim_scale);        animImageView.startAnimation(animation);        break;    case R.id.rotate_button:        break;    case R.id.trans_button:        break;        }    }}
    Salin selepas log masuk

    alpha动画?调节透明度

    alpha的参数如下:

  • android:fromAlpha:动画开始的透明度,从0.0~1.0,0.0表示完全透明,1.0表示完全不透明。
  • android:toAlpha:动画结束的透明度,也是从0.0~1.0。
  • 从Animation类继承的属性:

  • android:duration:动画持续时间,以毫秒为单位。
  • android:fillAfter:如果设置为true,控件动画结束时,将保持动画最后时的状态。
  • android:fillBefore:如果设置为true,控件动画结束后,还原到开机动画前的状态。
  • android:fillEnabled:与android:fillBefore的效果相同,都是在动画结束时将控件还原到初始状态。
  • android:repeatCount:重复次数
  • android:repeatMode:重复类型,有reverse和restart两个值,reverse表示倒序回放,restart表示重新放一遍。
  • 我们以上一个TweenAnimationTest类为模板,当点击alpha button的时候,我们触发透明度动画效果。

    res/anim/anim_alpha.xml文件如下:

    <?xml version="1.0" encoding="utf-8"?><alpha xmlns:android="http://schemas.android.com/apk/res/android" android:duration="500" android:fillBefore="true" android:fromAlpha="0.0" android:toAlpha="1.0" ></alpha>
    Salin selepas log masuk

    响应点击alpha button的listener事件为:

    case R.id.alpha_button:    Animation alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.anim_alpha);    animImageView.startAnimation(alphaAnimation);    break;
    Salin selepas log masuk

    rotate动画?旋转

    rotate参数如下:

  • android:fromDegrees:开始旋转的角度位置,正数值代表顺时针的角度,负数值代表逆时针旋转的角度。
  • android:toDegrees:结束时旋转到的角度位置,正数值代表顺时针的角度,负数值代表逆时针旋转的角度。
  • android:pivotX:旋转起点的X轴坐标。
  • android:pivotY:旋转起点的Y轴坐标。
  • 从Animation类继承的属性:

  • android:duration:动画持续时间,以毫秒为单位。
  • android:fillAfter:如果设置为true,控件动画结束时,将保持动画最后时的状态。
  • android:fillBefore:如果设置为true,控件动画结束后,还原到开机动画前的状态。
  • android:fillEnabled:与android:fillBefore的效果相同,都是在动画结束时将控件还原到初始状态。
  • android:repeatCount:重复次数
  • android:repeatMode:重复类型,有reverse和restart两个值,reverse表示倒序回放,restart表示重新放一遍。
  • res/anim/anim_rotate.xml文件如下:

    <?xml version="1.0" encoding="utf-8"?><rotate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="1000" android:fillAfter="true" android:fromDegrees="0" android:pivotX="0" android:pivotY="0" android:repeatCount="3" android:toDegrees="810" ></rotate>
    Salin selepas log masuk

    响应点击alpha button的listener事件为:

    case R.id.rotate_button:    Animation rotateAnimation = AnimationUtils.loadAnimation(this, R.anim.anim_rotate);    animImageView.startAnimation(rotateAnimation);    break;
    Salin selepas log masuk

    translate动画?平移

    translate参数:

  • android:fromXDelta:起始X轴坐标。
  • android:fromYDelta:起始Y轴坐标。
  • android:toXDelta:结束X轴坐标。
  • android:toYDelta:结束Y轴坐标。
  • 从Animation类继承的属性:

  • android:duration:动画持续时间,以毫秒为单位。
  • android:fillAfter:如果设置为true,控件动画结束时,将保持动画最后时的状态。
  • android:fillBefore:如果设置为true,控件动画结束后,还原到开机动画前的状态。
  • android:fillEnabled:与android:fillBefore的效果相同,都是在动画结束时将控件还原到初始状态。
  • android:repeatCount:重复次数
  • android:repeatMode:重复类型,有reverse和restart两个值,reverse表示倒序回放,restart表示重新放一遍。
  • 注意:京东splash页面的进度条用的就是translate动画。

    res/anim/anim_rotate.xml文件如下:

    <?xml version="1.0" encoding="utf-8"?><translate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="2000" android:fillAfter="true" android:fromXDelta="0.0" android:toXDelta="60%p" ></translate>
    Salin selepas log masuk

    响应点击alpha button的listener事件为:

    case R.id.trans_button:    Animation transAnimation = AnimationUtils.loadAnimation(this, R.anim.anim_translate);    animImageView.startAnimation(transAnimation);    break;
    Salin selepas log masuk
    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

    Tag artikel panas

    Notepad++7.3.1

    Notepad++7.3.1

    Editor kod yang mudah digunakan dan percuma

    SublimeText3 versi Cina

    SublimeText3 versi Cina

    Versi Cina, sangat mudah digunakan

    Hantar Studio 13.0.1

    Hantar Studio 13.0.1

    Persekitaran pembangunan bersepadu PHP yang berkuasa

    Dreamweaver CS6

    Dreamweaver CS6

    Alat pembangunan web visual

    SublimeText3 versi Mac

    SublimeText3 versi Mac

    Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

    Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi? Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi? Mar 04, 2025 pm 12:32 PM

    Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?

    Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Mar 17, 2025 pm 12:27 PM

    Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna?

    Bagaimana cara menambah kesan strok kepada imej PNG di laman web? Bagaimana cara menambah kesan strok kepada imej PNG di laman web? Mar 04, 2025 pm 02:39 PM

    Bagaimana cara menambah kesan strok kepada imej PNG di laman web?

    Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Mar 17, 2025 pm 12:20 PM

    Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5?

    Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Mar 20, 2025 pm 06:05 PM

    Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya?

    Apakah tujuan & lt; DATALIST & GT; unsur? Apakah tujuan & lt; DATALIST & GT; unsur? Mar 21, 2025 pm 12:33 PM

    Apakah tujuan & lt; DATALIST & GT; unsur?

    Apakah tujuan & lt; meter & gt; unsur? Apakah tujuan & lt; meter & gt; unsur? Mar 21, 2025 pm 12:35 PM

    Apakah tujuan & lt; meter & gt; unsur?

    Apakah implikasi keselamatan menggunakan iframes, dan bagaimana saya dapat mengurangkannya? Apakah implikasi keselamatan menggunakan iframes, dan bagaimana saya dapat mengurangkannya? Mar 18, 2025 pm 02:51 PM

    Apakah implikasi keselamatan menggunakan iframes, dan bagaimana saya dapat mengurangkannya?

    See all articles