android Tween Animation屬性設(shè)置方法實(shí)例
在Android開(kāi)發(fā)中,Animation是用來(lái)給控件制作效果的。大多數(shù)的控件都可以用這個(gè)類,這個(gè)類包含了4種基本動(dòng)作,分別為移動(dòng),旋轉(zhuǎn),淡入淡出,縮放。在使用Animation時(shí),可以在.java文件中用java代碼對(duì)其進(jìn)行設(shè)置,這樣的優(yōu)點(diǎn)是可以方便調(diào)試程序效果;另外一種方法就是在xml中對(duì)控件的屬性做設(shè)置,好處是代碼的重用性比較高,缺點(diǎn)是不方便調(diào)試。
一、在java代碼中使用Animation
在java代碼中使用Animation主要分為下面4個(gè)步驟。
創(chuàng)建一個(gè)AnimationSet類,AnimationSet類是一個(gè)Animation集合,里面可以許多Animation,且在AnimationSet中設(shè)置的屬性適用于里面的所有Animation。
根據(jù)我們需要的動(dòng)態(tài)效果創(chuàng)建一個(gè)Animation類,主要有4個(gè)這樣的類,分別為AlphaAnimation,ScaleAnimation,RotateAnimation,TranslateAnimation,分別對(duì)應(yīng)著一種動(dòng)畫效果。
將上面建立好的Animation設(shè)置相應(yīng)的動(dòng)態(tài)屬性,然后加入到AnimationSet中。
最后在需要適用這個(gè)動(dòng)態(tài)的效果的控件中加載這個(gè)AnimationSet。
這里,做了一個(gè)簡(jiǎn)單的實(shí)驗(yàn),分別試了下上面的動(dòng)態(tài)效果。實(shí)驗(yàn)室對(duì)一個(gè)image圖標(biāo)進(jìn)行動(dòng)態(tài)演示,下面有4個(gè)按鈕,每個(gè)按鈕對(duì)應(yīng)一個(gè)動(dòng)態(tài)演示的效果。這4中效果分別是:image圖標(biāo)由完全透明到完全不透明變化,持續(xù)時(shí)間為1s;image圖標(biāo)由原來(lái)大小尺寸沿自身尺寸中心逐漸縮放到0,持續(xù)時(shí)間為1s;image圖標(biāo)以自身中心為圓心旋轉(zhuǎn)360度,持續(xù)時(shí)間為1s;image圖標(biāo)從自身位置開(kāi)始同時(shí)向右和向下移動(dòng)了imageView控件的寬和高長(zhǎng)度。
界面如下所示(動(dòng)態(tài)效果就不一張一張截圖演示了):
在設(shè)置Animation屬性的時(shí)候,有一點(diǎn)需要注意的是,在進(jìn)行尺度縮放,平移,旋轉(zhuǎn)會(huì)涉及到中心點(diǎn)以及移動(dòng)的距離那些參數(shù),這些參數(shù)的值的設(shè)置是需要依據(jù)它值屬性來(lái)的,如果值屬性為Animation.RELATIVE_TO_SELF,那么就是參考控件自身的坐標(biāo),如果是Animation.RELATIVE_TO_PARENT,那么就是參考程序界面的坐標(biāo)。
Java文件代碼如下:
package com.example.anim_1;
import android.app.Activity;
import android.view.View;
import android.view.View.OnClickListener;
import android.os.Bundle;
import android.view.Menu;
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 MainActivity extends Activity {
private ImageView image = null;
private Button alpha = null;
private Button scale = null;
private Button rotate = null;
private Button translate = null;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
image = (ImageView)findViewById(R.id.image);
alpha = (Button)findViewById(R.id.alpha);
scale = (Button)findViewById(R.id.scale);
rotate = (Button)findViewById(R.id.rotate);
translate = (Button)findViewById(R.id.translate);
alpha.setOnClickListener(new AlphaButtonListener());
scale.setOnClickListener(new ScaleButtonListener());
rotate.setOnClickListener(new RotateButtonListener());
translate.setOnClickListener(new TranslateButtonListener());
}
private class AlphaButtonListener implements OnClickListener{
public void onClick(View v) {
// TODO Auto-generated method stub
//這里設(shè)置ture參數(shù)表示共享interpolator
AnimationSet alpha_animation_set = new AnimationSet(true);
//從完全不透明到完全透明
//這里的數(shù)字后面用f難道表示浮點(diǎn)型?
AlphaAnimation alpha_animation = new AlphaAnimation(1.0f, 0.0f);
alpha_animation_set.addAnimation(alpha_animation);
alpha_animation.setDuration(1000);//1s鐘
image.startAnimation(alpha_animation_set);
}
}
private class ScaleButtonListener implements OnClickListener{
public void onClick(View v) {
// TODO Auto-generated method stub
AnimationSet scale_animation_set = new AnimationSet(true);
//以自身為尺度縮放中心,從原大小尺寸逐漸縮放到0尺寸
ScaleAnimation scale_animation = new ScaleAnimation(1.0f, 0.0f, 1.0f, 0.0f,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
scale_animation_set.addAnimation(scale_animation);
scale_animation.setDuration(1000);//1s鐘
image.startAnimation(scale_animation_set);
}
}
private class RotateButtonListener implements OnClickListener{
public void onClick(View v) {
// TODO Auto-generated method stub
AnimationSet rotate_animation_set = new AnimationSet(true);
//以自身中心為圓心,旋轉(zhuǎn)360度
RotateAnimation rotate_animation = new RotateAnimation(0, 360,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
rotate_animation_set.addAnimation(rotate_animation);
rotate_animation.setDuration(1000);//1s鐘
image.startAnimation(rotate_animation_set);
}
}
private class TranslateButtonListener implements OnClickListener{
public void onClick(View v) {
// TODO Auto-generated method stub
AnimationSet translate_animation_set = new AnimationSet(true);
//以自身為坐標(biāo)系和長(zhǎng)度單位,從(0,0)移動(dòng)到(1,1)
TranslateAnimation translate_animation = new TranslateAnimation(Animation.RELATIVE_TO_SELF,
0.0f, Animation.RELATIVE_TO_SELF, 1.0f,
Animation.RELATIVE_TO_SELF, 0.0f,
Animation.RELATIVE_TO_SELF, 1.0f);
translate_animation_set.addAnimation(translate_animation);
translate_animation.setDuration(1000);//1s鐘
image.startAnimation(translate_animation_set);
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}
本次試驗(yàn)的xml布局文件代碼如下:
<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" >
<ImageView
android:id="@+id/image"
android:layout_centerHorizontal="true"
android:paddingTop="80px"
android:paddingBottom="80px"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/girl"
/>
<LinearLayout
android:id="@+id/button_group"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal"
android:layout_below="@id/image"
>
<Button
android:id="@+id/alpha"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5px"
android:text="@string/alpha"
android:ems="1"
/>
<Button
android:id="@+id/scale"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5px"
android:text="@string/scale"
android:ems="1"
/>
<Button
android:id="@+id/rotate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5px"
android:text="@string/rotate"
android:ems="1"
/>
<Button
android:id="@+id/translate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5px"
android:text="@string/translate"
android:ems="1"
/>
</LinearLayout>
</RelativeLayout>
二、在xml文件中使用animation
在xml中使用animation,只需對(duì)xml文件中的動(dòng)畫屬性進(jìn)行設(shè)置,這樣寫好的一個(gè)xml文件可以被多次利用。
完成該功能步驟大概如下:
首先在res目錄下新建anim目錄,在anim目錄里面建立xml文件,每個(gè)xml文件對(duì)應(yīng)里面可以設(shè)置各種動(dòng)畫,可以將上面講到的4種動(dòng)畫都放里面。這些xml文件的屬性設(shè)置應(yīng)該都在set標(biāo)簽下面。
在java語(yǔ)句中,只需要對(duì)需要?jiǎng)赢嬶@示的控件加載一個(gè)animation對(duì)象,該animation對(duì)象采用AnimationUtils.loadAnimation()方法來(lái)獲得,該方法里面就有一個(gè)參數(shù)為anim下的一個(gè)xml,因此這個(gè)控件也就得到了相應(yīng)xml里面設(shè)置的動(dòng)畫效果了。
這次試驗(yàn)的效果和第一種情況的一樣,只是圖片換了一張。
效果演示界面如下:

在用xml設(shè)置動(dòng)態(tài)屬性的時(shí)候,有些屬性比如旋轉(zhuǎn)中心,平移尺寸的設(shè)置,有如下規(guī)則:
如果android:pivotX=”N”,則表示絕對(duì)坐標(biāo)比例,即屏幕的坐標(biāo)比例。
如果android:pivotX=”N%”,則表示相對(duì)自身的坐標(biāo)比例。
如果android:pivotX=”N%p”,則表示相對(duì)于父控件的坐標(biāo)比例。
實(shí)驗(yàn)代碼如下(附錄有工程code下載鏈接):
MainActivity.java:
package com.example.anim_2;
import android.app.Activity;
import android.view.View;
import android.view.View.OnClickListener;
import android.os.Bundle;
import android.view.Menu;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;
public class MainActivity extends Activity {
private ImageView image = null;
private Button alpha = null;
private Button scale = null;
private Button rotate = null;
private Button translate = null;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
image = (ImageView)findViewById(R.id.image);
alpha = (Button)findViewById(R.id.alpha);
scale = (Button)findViewById(R.id.scale);
rotate = (Button)findViewById(R.id.rotate);
translate = (Button)findViewById(R.id.translate);
alpha.setOnClickListener(new AlphaButtonListener());
scale.setOnClickListener(new ScaleButtonListener());
rotate.setOnClickListener(new RotateButtonListener());
translate.setOnClickListener(new TranslateButtonListener());
}
private class AlphaButtonListener implements OnClickListener{
public void onClick(View v) {
// TODO Auto-generated method stub
Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.alpha);
image.startAnimation(animation);
}
}
private class ScaleButtonListener implements OnClickListener{
public void onClick(View v) {
Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.scale);
image.startAnimation(animation);
}
}
private class RotateButtonListener implements OnClickListener{
public void onClick(View v) {
Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.rotate);
image.startAnimation(animation);
}
}
private class TranslateButtonListener implements OnClickListener{
public void onClick(View v) {
Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate);
image.startAnimation(animation);
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}
activity_main.xml:
<LinearLayout 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:orientation="vertical"
>
<LinearLayout
android:id="@+id/image_layout"
android:layout_width="fill_parent"
android:layout_height="250dip"
android:gravity="center"
>
<ImageView
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/olympic"
/>
</LinearLayout>
<LinearLayout
android:id="@+id/button_group"
android:orientation="horizontal"
android:gravity="center_horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="@id/image_layout"
>
<Button
android:id="@+id/alpha"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dip"
android:text="@string/alpha"
android:ems="1"
/>
<Button
android:id="@+id/scale"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dip"
android:text="@string/scale"
android:ems="1"
/>
<Button
android:id="@+id/rotate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dip"
android:text="@string/rotate"
android:ems="1"
/>
<Button
android:id="@+id/translate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dip"
android:text="@string/translate"
android:ems="1"
/>
</LinearLayout>
</LinearLayout>
anim/alpha.xml:
set
android:interpolator="@android:anim/accelerate_interpolator"
xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:duration="1000"
/>
</set>
anim/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:fromXScale="1.0"
android:toXScale="0.0"
android:fromYScale="1.0"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000"
/>
</set>
anim/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:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000"
/>
</set>
anim/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:fromXDelta="0%"
android:toXDelta="100%"
android:fromYDelta="0%"
android:toYDelta="100%"
android:duration="1000"
/>
</set>
總結(jié):本次實(shí)驗(yàn)主要講android中animation這個(gè)類對(duì)控件的動(dòng)畫效果設(shè)置,對(duì)用java代碼和用xml代碼2種方式都做了個(gè)簡(jiǎn)單的實(shí)驗(yàn)。懂得其使用方法的大體流程。
作者:tornadomeet
- Android 動(dòng)畫之ScaleAnimation應(yīng)用詳解
- Android 動(dòng)畫之TranslateAnimation應(yīng)用詳解
- Android 動(dòng)畫之AlphaAnimation應(yīng)用詳解
- Android Animation實(shí)戰(zhàn)之屏幕底部彈出PopupWindow
- android Animation監(jiān)聽(tīng)器AnimationListener的使用方法)
- Android中AnimationDrawable使用的簡(jiǎn)單實(shí)例
- Android Tween動(dòng)畫之RotateAnimation實(shí)現(xiàn)圖片不停旋轉(zhuǎn)效果實(shí)例介紹
- Android開(kāi)發(fā)之圖形圖像與動(dòng)畫(五)LayoutAnimationController詳解
- Android開(kāi)發(fā)之圖形圖像與動(dòng)畫(四)AnimationListener簡(jiǎn)介
- Android開(kāi)發(fā)之圖形圖像與動(dòng)畫(三)Animation效果的XML實(shí)現(xiàn)
- Android開(kāi)發(fā)之圖形圖像與動(dòng)畫(二)Animation實(shí)現(xiàn)圖像的漸變/縮放/位移/旋轉(zhuǎn)
- Android 動(dòng)畫之RotateAnimation應(yīng)用詳解
- 解析Android中Animation動(dòng)畫的編寫要點(diǎn)
相關(guān)文章
詳解如何使用Android Studio 進(jìn)行NDK開(kāi)發(fā)和調(diào)試
本篇文章主要介紹了詳解如何使用Android Studio 進(jìn)行NDK開(kāi)發(fā)和調(diào)試,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12Android中Fragment相互切換間不被回收的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于Android中Fragment相互切換間不被回收的實(shí)現(xiàn)方法,文中給出了詳細(xì)的示例代碼和注釋供大家參考學(xué)習(xí),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。2017-08-08Flutter?Widget?之package?mason實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了Flutter?Widget?之package:?mason實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11Android基礎(chǔ)開(kāi)發(fā)之手勢(shì)識(shí)別
這篇文章主要為大家詳細(xì)介紹了Android基礎(chǔ)開(kāi)發(fā)之手勢(shì)識(shí)別的相關(guān)資料,感興趣的小伙伴們可以參考一下2016-06-0625個(gè)實(shí)用酷炫的Android開(kāi)源UI框架
本文為大家分享了25個(gè)實(shí)用酷炫的Android開(kāi)源UI框架,靈活運(yùn)用這些UI框架可在日常工作中節(jié)省不少時(shí)間2018-04-04Android編程實(shí)現(xiàn)檢測(cè)當(dāng)前電源狀態(tài)的方法
這篇文章主要介紹了Android編程實(shí)現(xiàn)檢測(cè)當(dāng)前電源狀態(tài)的方法,涉及Android針對(duì)當(dāng)前電源的電量、容量、伏數(shù)、溫度等的檢測(cè)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-11-11Android常用三方庫(kù)混淆規(guī)則整理(小結(jié))
這篇文章主要介紹了Android常用三方庫(kù)混淆規(guī)則整理(小結(jié)),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07Android 深入探究自定義view之事件的分發(fā)機(jī)制與處理詳解
對(duì)于安卓程序員來(lái)說(shuō),自定義view簡(jiǎn)直不要太重要,畢竟有很多功能,譬如圓形頭像這些,用單純的原生非常難以實(shí)現(xiàn),而用自定義view,簡(jiǎn)直分分鐘2021-11-11