美文网首页Android DevAndroid 自定义View系列
Android开发(43) 动画演示,会跑的小人,从屏幕左侧跑到

Android开发(43) 动画演示,会跑的小人,从屏幕左侧跑到

作者: 张云飞Vir | 来源:发表于2016-06-22 22:07 被阅读2255次

    需求

    想做一个动画,一个会跑的小人,从屏幕右侧跑道右侧,于是做了个尝试,上图:


    实现步骤

    要完成这样需要三步:

    1. 做一个 帧动画 (frame animation),由多张图片组成,组成小人连续跑动的样子。
    2. 做一个 位移动画 使得小人 从左到右产生移动。
    3. 在onStart里启动动画

    第一步,描述 “人物动作的变化”的动画

    准备多个动作的图片,写个xml animation :

    <?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/loading_iv_00"
            android:duration="60">
        </item>
        <item
            android:drawable="@drawable/loading_iv_01"
            android:duration="60">
        </item>
        <item
            android:drawable="@drawable/loading_iv_02"
            android:duration="60">
        </item>
        <item
            android:drawable="@drawable/loading_iv_03"
            android:duration="60">
        </item>
        <item
            android:drawable="@drawable/loading_iv_04"
            android:duration="60">
        </item>
        <item
            android:drawable="@drawable/loading_iv_05"
            android:duration="60">
        </item>
        <item
            android:drawable="@drawable/loading_iv_06"
            android:duration="60">
        </item>
        <item
            android:drawable="@drawable/loading_iv_07"
            android:duration="60">
        </item>
        <item
            android:drawable="@drawable/loading_iv_08"
            android:duration="60">
        </item>
        <item
            android:drawable="@drawable/loading_iv_09"
            android:duration="60">
        </item>
        <item
            android:drawable="@drawable/loading_iv_10"
            android:duration="60">
        </item>
    
    </animation-list>
    

    代码:

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageView1 = (ImageView) findViewById(R.id.imageView1);
    
        imageView1.setImageResource(R.anim.loading);
        imageView1.setVisibility(View.GONE);
        mAnimationDrawable = (AnimationDrawable) imageView1.getDrawable();
        mAnimationDrawable.setOneShot(false);
    }
    

    第二步,位移动画

    代码:

        Animation translate = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, -0.2f,
                Animation.RELATIVE_TO_PARENT, 1, Animation.RELATIVE_TO_SELF, 0,
                Animation.RELATIVE_TO_SELF, 0);
    
        translate.setDuration(3000);
        translate.setRepeatCount(Animation.INFINITE);
    

    这句话的意思时,相对于 父容器 的x坐标移动,y轴不改变,一直循环

    第三步,启动

    启动动画即可,代码:

    package com.example.demo_run;
    
    import android.app.Activity;
    import android.graphics.drawable.AnimationDrawable;
    import android.os.Bundle;
    import android.view.View;
    import android.view.ViewTreeObserver;
    import android.view.animation.Animation;
    import android.view.animation.TranslateAnimation;
    import android.widget.ImageView;
    
    public class MainActivity extends Activity {
        ImageView imageView1;
        AnimationDrawable mAnimationDrawable;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            imageView1 = (ImageView) findViewById(R.id.imageView1);
    
            imageView1.setImageResource(R.anim.loading);
            imageView1.setVisibility(View.GONE);
            mAnimationDrawable = (AnimationDrawable) imageView1.getDrawable();
            mAnimationDrawable.setOneShot(false);
        }
    
        @Override
        protected void onStart() {
            startAnimation();
            super.onStart();
        }
    
        private void startAnimation() {
    
            mAnimationDrawable.start();
            Animation translate = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, -0.2f,
                    Animation.RELATIVE_TO_PARENT, 1, Animation.RELATIVE_TO_SELF, 0,
                    Animation.RELATIVE_TO_SELF, 0);
    
            translate.setDuration(3000);
            translate.setRepeatCount(Animation.INFINITE);
            imageView1.startAnimation(translate);
    
            imageView1.setVisibility(View.VISIBLE);
        }
    }
    

    页面布局:

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#3F99C3"
        tools:context=".MainActivity" >
    
        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true" />
    
    </RelativeLayout>
    

    演示代码下载

    相关文章

      网友评论

      本文标题:Android开发(43) 动画演示,会跑的小人,从屏幕左侧跑到

      本文链接:https://www.haomeiwen.com/subject/tdendttx.html