zoukankan      html  css  js  c++  java
  • Android动画及图片的缩放和旋转

    Android动画有2种,一种是Tween Animation,另一种是Frame Animation,先说说Tween动画吧。

      Tween动画是对视图对象中的内容进行一系列简单的转换,比如位置的移动,大小的缩放,旋转,透明度得变化等等。Tween动画可以写到一个xml文件中,就像定义布局文件一样,当然,也可以写到android代码中,不过推荐写到xml文件中,因为它具备的阅读性,可重用性大大超过了硬编码。xml文件放在工程的res/anim目录中,这个目录中要包含一个根元素,可以是<scale>,<translate>,<alpha>或者<rotate>,当然,这些元素都可以放到一个动画集合<set>中,默认情况下,所有的动画指令都是同时发生的,为了让他们按顺序发生,需要设置一个特殊的属性startOffset。下面定义了一个动画的集合:

    复制代码
    1 <?xml version="1.0" encoding="utf-8"?>
    2  <set xmlns:android="http://schemas.android.com/apk/res/android"
    3 android:shareInterpolator="false">
    4 <scale android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    5 android:fromXScale="1.0"
    6 android:toXScale="1.4"
    7 android:fromYScale="1.0"
    8 android:toYScale="0.6"
    9 android:pivotX="50%"
    10 android:pivotY="50%"
    11 android:fillAfter="false"
    12 android:duration="700"/>
    13 
    14 <set android:interpolator="@android:anim/decelerate_interpolator">
    15 <scale
    16 android:fromXScale="1.4"
    17 android:toXScale="0.0"
    18 android:fromYScale="0.6"
    19 android:toYScale="0.0"
    20 android:pivotX="50%"
    21 android:pivotY="50%"
    22 android:startOffset="700"
    23 android:duration="400"
    24 android:fillBefore="false"/>
    25 <rotate
    26 android:fromDegrees="0"
    27 android:toDegrees="-45"
    28 android:toYScale="0.0"
    29 android:pivotX="50%"
    30 android:pivotY="50%"
    31 android:startOffset="700"
    32 android:duration="400"/>
    33 </set>
    34  </set>
    复制代码

    这里解释一下这段代码的作用:

    首先是一个动画的集合set,在这个set中有一个属性shareInterpolater,如果设置为true,则这个集合下面所有的子元素都享有同样的interpolater,api上面是这样说的:

    android:shareInterpolator
    Boolean. "true" if you want to share the same interpolator among all child elements.
    紧跟在这个集合后面的是一个缩放动画,里面有一些个属性,下面一一介绍:
    android:interpolator属性:这是值定一个动画的插入器,有一些常用的插入器:accelerate_decelerate_interpolator加速-减速动画插入器,顾名思义,就是先加速后减速,accelerate_interpolator加速动画插入器,decelerate_interpolator减速动画插入器
    android:fromXScale属性为动画起始时,x坐标上的伸缩尺寸
    android:toXScal属性为动画结束时,x坐标上的伸缩尺寸
    android:fromYScale属性为动画起始时,y坐标上的伸缩尺寸
    android:toYScale属性为动画结束时,y坐标上的伸缩尺寸
    关于伸缩尺寸这里还要罗嗦一下:
    也就是上面的四个属性的值:0.0表示收缩到没有,1.0表示正常无收缩,值小于1.0表示收缩,值大于1.0表示放大。
    android:fillAfter属性当设置为true时,该动画转化在动画结束后被应用,同理还有android:fillBefore属性,当设置为true时,该动画转化在动画开始前被应用
    android:duration属性表示动画持续的时间,单为时毫秒
    android:pivotX属性为动画相对于x坐标的起始位置
    android:pivotY属性为动画相对于y坐标的起始位置
    这2个属性有不同的格式表示,如值为50,表示是相对于父类的50%,如值为50%,表示是相对于自己的50%
    这里的50%表示相对于自身x,y坐标上的中点位置
    紧跟着是一个动画集合,里面有缩放和旋转,这个集合的interpolater为减速动画插入器
    这里的缩放里面还有一个属性,android:startOffset属性是设置动画开始的时间,这里设置700是表示700毫秒之后开始,也就是第一个缩放完成之后开始。
    旋转里面的属性跟scale里面的都差不多,只是旋转讲究的角度。
    android:fromDegrees属性表示动画起始时的角度
    android:toDegrees属性表示动画结束时旋转的角度,可以大于360度
    动画文件写好了之后,我们就可以在代码中调用这个动画了,先写一个布局文件,布局文件里面有一个ImageView,然后我们让这个ImageView做动画。
    布局文件如下:
    复制代码
    1 <?xml version="1.0" encoding="utf-8"?>
    2 <LinearLayout
    3 xmlns:android="http://schemas.android.com/apk/res/android"
    4 android:layout_width="match_parent"
    5 android:layout_height="match_parent">
    6 <ImageView 
    7 android:id="@+id/imageView1" 
    8 android:src="@drawable/duola"
    9 android:layout_width="match_parent" 
    10 android:layout_height="match_parent"></ImageView>
    11 </LinearLayout>
    复制代码
    然后我们让这个图片按照我们xml中指定的动画运动:
    代码:
    复制代码
    package com.test.shang;

    import android.app.Activity;
    import android.graphics.drawable.AnimationDrawable;
    import android.graphics.drawable.TransitionDrawable;
    import android.os.Bundle;
    import android.view.MotionEvent;
    import android.view.animation.Animation;
    import android.view.animation.AnimationSet;
    import android.view.animation.AnimationUtils;
    import android.widget.ImageView;

    public class TestStyle extends Activity {
    AnimationDrawable animationDrawable;

    @Override
    protected void onCreate (Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.test);
    ImageView iv 
    = (ImageView) findViewById(R.id.imageView1);
    Animation animation 
    = (AnimationSet) AnimationUtils.loadAnimation(this, R.anim.anim_set);
    iv.setAnimation(animation);
    animation.start();
    }
    }
    复制代码
    因为这里是动画,不好截图,所以我就不截图了,具体效果大家可以试试看。
    下面接着说说Frame Animation吧:也就是帧动画,可以使用AndroidDrawable来负责帧动画,同样它可以在xml文件中很方便的列出所有的帧,按照周期去执行每帧动画,下面是一个定义帧动画的例子:
    复制代码
    1 <?xml version="1.0" encoding="utf-8"?>
    2 <animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    3 android:oneshot="true">
    4 <item android:drawable="@drawable/register" android:duration="500"/>
    5 <item android:drawable="@drawable/duola" android:duration="500"/>
    6 <item android:drawable="@drawable/icon" android:duration="500"/>
    7 </animation-list>
    复制代码
    这里定义了帧的名字和每帧的持续时间.
    这里有3帧,通过设置android:oneshot属性为true,它将会在最后一帧停下来,如果设置为false,它将会循环播放,可以把它添加到一个背景中,让他播放,具体代码如下:
    布局文件:
    复制代码
    1 <?xml version="1.0" encoding="utf-8"?>
    2 <LinearLayout
    3 xmlns:android="http://schemas.android.com/apk/res/android"
    4 android:layout_width="match_parent"
    5 android:layout_height="match_parent">
    6 <ImageView 
    7 android:id="@+id/imageView1" 
    8 android:layout_width="match_parent" 
    9 android:layout_height="match_parent"></ImageView>
    10 </LinearLayout>
    复制代码
    在代码里面设置imageview的背景图片,然后做动画:
    复制代码
    1 package com.test.shang;
    2 
    3 import android.app.Activity;
    4 import android.graphics.drawable.AnimationDrawable;
    5 import android.graphics.drawable.TransitionDrawable;
    6 import android.os.Bundle;
    7 import android.view.MotionEvent;
    8 import android.view.animation.Animation;
    9 import android.view.animation.AnimationSet;
    10 import android.view.animation.AnimationUtils;
    11 import android.widget.ImageView;
    12 
    13 public class TestStyle extends Activity {
    14 AnimationDrawable animationDrawable;
    15 
    16 @Override
    17 protected void onCreate (Bundle savedInstanceState) {
    18 super.onCreate(savedInstanceState);
    19 setContentView(R.layout.test);
    20 ImageView iv = (ImageView) findViewById(R.id.imageView1);
    21 iv.setBackgroundResource(R.anim.anim_list);
    22 animationDrawable = (AnimationDrawable) iv.getBackground();
    23 }
    24 @Override
    25 public boolean onTouchEvent (MotionEvent event) {
    26 if(event.getAction() == MotionEvent.ACTION_DOWN) {
    27 animationDrawable.start();
    28 return true;
    29 }
    30 return super.onTouchEvent(event);
    31 }
    32 }
    复制代码
    这里需要注意的是:AnimationDrawable在调用OnCreate的过程中不能调用start(),这是因为AnimationDrawable不能在不完全的窗口上运行,需要一个操作来触发,如果你想立即播放动画,没有必要的交互,你可以在onWindowFocusChanged()方法中调用它,这样它将会成为窗口焦点。
    下面说说图片的缩放和旋转:
    这里我就写的比较简单了,代码里面的注释很详细,可以慢慢看。
    复制代码
    1 package com.test.shang;
    2 
    3 import android.app.Activity;
    4 import android.graphics.Bitmap;
    5 import android.graphics.BitmapFactory;
    6 import android.graphics.Matrix;
    7 import android.graphics.drawable.BitmapDrawable;
    8 import android.os.Bundle;
    9 import android.widget.ImageView;
    10 import android.widget.ImageView.ScaleType;
    11 import android.widget.LinearLayout;
    12 import android.widget.LinearLayout.LayoutParams;
    13 
    14 public class BitmapTest extends Activity {
    15 
    16 @Override
    17 protected void onCreate (Bundle savedInstanceState) {
    18 super.onCreate(savedInstanceState);
    19 setTitle("测试图片的缩放和旋转");
    20 LinearLayout layout = new LinearLayout(this);
    21 
    22 //加载需要操作的图片,这里是机器猫的图片
    23 Bitmap bitmapOrg = BitmapFactory.decodeResource(getResources(), R.drawable.duola);
    24 
    25 //获取这个图片的宽和高
    26 int width = bitmapOrg.getWidth();
    27 int height = bitmapOrg.getHeight();
    28 
    29 //定义预转换成的图片的宽和高
    30 int newWidth = 200;
    31 int newHight = 200;
    32 
    33 //计算缩放率,新尺寸除原尺寸
    34 float scaleWidth = (float)newWidth/width;
    35 float scaleHeight = (float)newHight/height;
    36 
    37 //创建操作图片用的matrix对象
    38 Matrix matrix = new Matrix();
    39 
    40 //缩放图片动作
    41 matrix.postScale(scaleWidth, scaleHeight);
    42 
    43 //旋转图片动作
    44 matrix.postRotate(45);
    45 
    46 //创建新的图片
    47 Bitmap resizedBitmap = Bitmap.createBitmap(bitmapOrg, 0, 0, width, height, matrix, true);
    48 
    49 //将上面创建的Bitmap转换成Drawable对象,使得其可以使用在imageView,imageButton上。
    50 BitmapDrawable bitmapDrawable = new BitmapDrawable(resizedBitmap);
    51 
    52 //创建一个ImageView
    53 ImageView iv = new ImageView(this);
    54 
    55 //将imageView的图片设置为上面转换的图片
    56 iv.setImageDrawable(bitmapDrawable);
    57 
    58 //将图片居中显示
    59 iv.setScaleType(ScaleType.CENTER);
    60 
    61 //将imageView添加到布局模板中
    62 layout.addView(iv, new LinearLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
    63 
    64 //设置为本activity的模板
    65 setContentView(layout);
    66 }
    67 }
    复制代码
    下面是效果预览:
    好了,今天就到这里吧。。。。
  • 相关阅读:
    福大软工1816 · 第四次作业
    福大软工1816 · 第三次作业
    福大软工1816 · 第二次作业
    福大软工1816 · 第四次作业
    福大软工1816 · 第三次作业
    Alpha 冲刺 (4/10)
    Alpha 冲刺 (3/10)
    Alpha 冲刺 (2/10)
    Alpha 冲刺 (1/10)
    项目需求分析
  • 原文地址:https://www.cnblogs.com/china-soft/p/3440645.html
Copyright © 2011-2022 走看看