文档章节

Android动画及图片的缩放和旋转

今日竹石
 今日竹石
发布于 2014/03/28 18:59
字数 2620
阅读 102
收藏 1

  Android动画有2种,一种是Tween Animation,另一种是Frame Animation,

属性动画:

    动画定义在xml文件中修改目标对象的某一个属性,如background,alpha etc.

    文件位置:res/animator/xxx.xml

    资源类型数据:ValueAnimator、ObjectAnimator、AnimatorSet

    资源引用:in java---R.animator.xxx     in xml------@[package:]animator/xxx

    定义动画的语法:

<set  android:ordering=["together" | "sequentially"]>    
<objectAnimator        
android:propertyName="string"       
android:duration="int"        
android:valueFrom="float | int | color"        
android:valueTo="float | int | color"        
android:startOffset="int"        
android:repeatCount="int"        
android:repeatMode=["repeat" | "reverse"]
android:valueType=["intType" | "floatType"]/>    
<animator        
android:duration="int"        
android:valueFrom="float | int | color"        
android:valueTo="float | int | color"        
android:startOffset="int"        
android:repeatCount="int"        
android:repeatMode=["repeat" | "reverse"]
android:valueType=["intType" | "floatType"]/>    
<set>        ...
</set></set>

    在该文件中只有一个根元素可以是set、objectAnimator、valueAnimator当然你也可以将它们组合在一个set中,set之间允许嵌套。

<set>:持有其他动画元素的容器,对应的java类AnimatorSet.

android:order

指定<set>中动画的播放顺序

sequentially:按照顺序播放动画

together (default):同时播放所以动画

<objectAnimator>:在一段时间内为指定对象的某个属性赋予动画,对应java类ObjectAnimator.

android:propertyName

String Required,要实现动画的属性,你可以指定诸如alpha,backgroundColor等,当然在objectAnimator中不能指定目标对象在xml配置文件中,你可以通过loadAnimator()方法加载动画并通过setTarget()方法为动画指定目标。

android:valueTo

float, int, or colorRequired.代表属性在动画最后的值.

  • android:valueFrom

  • float, int, or color.属性在动画开始的值,如果没有指定将通过属性的get方法获取默认值。

  • android:duration

  • int. 动画的时间(毫秒)

  • android:startOffset

  • int . 动画开始的延迟执行时间(毫秒)即调用start()后动画延迟执行的时间。

  • android:repeatCount

  • int . 动画重复执行的次数

  • -1和负数:无限循环执行

  • 正数:执行相应的次数即可

  • 0:执行1次后不循环

  • android:repeatMode

  • int . 动画结束后如何重复(重复模式),需要repeatCount为负数才有效

  • reverse:动画翻转,有结束向开始动画

  • repeat:重复动画

  • android:valueType

  • Keyword.不能为该属性指定是颜色的值,animator框架会自动处理颜色值。

  • intType:指定动画中值是整数

  • floatType (default):指定动画中的值是浮点数

  • <animator>:在指定的时间里执行动画,对应java类ValueAnimator

  •  属性参考<ObjectAnimator>  

下面先说说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, 00, 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 }



© 著作权归作者所有

今日竹石
粉丝 41
博文 227
码字总数 181312
作品 0
朝阳
程序员
私信 提问
Android Tween动画之RotateAnimation实现图片不停旋转

本文主要介绍Android中如何使用rotate实现图片不停旋转的效果。Android 平台提供了两类动画,一类是 Tween 动画,即通过对场景里的对象不断做图像变换(平移、缩放、旋转)产生动画效果;第二类...

崔同亮
2013/09/26
0
2
【Android动画】之Tween动画 (渐变、缩放、位移、旋转)

Android 平台提供了两类动画。 一类是Tween动画,就是对场景里的对象不断的进行图像变化来产生动画效果(旋转、平移、放缩和渐变)。 第二类就是 Frame动画,即顺序的播放事先做好的图像,与...

晨曦之光
2012/03/01
18.2K
4
Android 动画Animation

动画分为视图动画(view animation)和属性动画(property animation),视图动画又分为帧动画和补间动画 视图动画控件(iv)点击事件(OnClickListener接口)触发位置在原位置 1.帧动画(Fra...

Coding缘
03/22
0
0
android 围绕中心旋转动画

本文主要介绍Android中如何使用rotate实现图片不停旋转的效果。Android 平台提供了两类动画,一类是 Tween 动画,即通过对场景里的对象不断做图像变换(平移、缩放、旋转)产生动画效果;第二类...

程序袁_绪龙
2015/03/05
0
0
android 围绕中心旋转动画

本文主要介绍Android中如何使用rotate实现图片不停旋转的效果。Android 平台提供了两类动画,一类是 Tween 动画,即通过对场景里的对象不断做图像变换(平移、缩放、旋转)产生动画效果;第二类...

Jonson
2013/03/29
0
8

没有更多内容

加载失败,请刷新页面

加载更多

八、RabbitMQ的集群原理

集群架构 写在前面 RabbitMQ集群是按照低延迟环境设计的,千万不要跨越WAN或者互联网来搭建RabbitMQ集群。如果一定要在高延迟环境下使用RabbitMQ集群,可以参考使用Shovel和Federation工具。...

XuePeng77
今天
1
0
mac系统下,brew 安装mysql,用终端可以连接,navicat却连接不上?

问题: 1.报错? 2059 - Authentication plugin 'caching_sha2_password' cannot be loaded: dlopen(../Frameworks/caching_sha2_password.so, 2): image not found 2.自己通过设置,已经把密......

写bug的攻城狮
昨天
2
0
老生常谈,HashMap的死循环

问题 最近的几次面试中,我都问了是否了解HashMap在并发使用时可能发生死循环,导致cpu100%,结果让我很意外,都表示不知道有这样的问题,让我意外的是面试者的工作年限都不短。 由于HashMap...

群星纪元
昨天
5
0
拉普拉斯算子

拉普拉斯算子是二阶微分算子。 我们知道,一维离散信号一阶微分公式如下: 相应的,一维离散信号二阶微分公式如下: 由于图像有x和y两个方向,因此图像信号属于二维离散信号。其在x,y两个...

yepanl
昨天
3
0
记录"正则表达式"

详细请查看我的博客:https://blog.enjoytoshare.club/article/RegularExpression.html 1 写在前面 正则表达式(Regular Expression)在代码中常常简写为regex。正则表达式通常被用来检索、替...

wugenqiang
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部