2018-04-25

補(bǔ)間動(dòng)畫(Tween Animation)

    包括  (1)透明度漸變動(dòng)畫  AlphaAnimation
          (2)旋轉(zhuǎn)動(dòng)畫  RotateAnimation
          (3)縮放動(dòng)畫  ScaleAnimation
          (4)平移動(dòng)畫  TranslateAnimation

通過(guò)xml文件設(shè)置動(dòng)畫效果

1.做出如圖所示的界面,然后給各個(gè)按鈕加上onclick,對(duì)按鈕進(jìn)行監(jiān)聽:


圖1-13.png

代碼如下:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="145dp"
    android:src="@drawable/a09" />

 <LinearLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_alignParentBottom="true"
     android:layout_alignParentLeft="true"
     android:orientation="horizontal" >

     <Button
         android:id="@+id/button1"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:text="透明"
         android:onClick="Alpha" />

     <Button
         android:id="@+id/button2"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:text="旋轉(zhuǎn)" 
         android:onClick="Rotate"/>

     <Button
         android:id="@+id/button3"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:text="縮放" 
         android:onClick="Scale"/>

     <Button
         android:id="@+id/button4"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:text="平移"
         android:onClick="Translate" />

     <Button
         android:id="@+id/button5"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:text="全部" 
         android:onClick="All"/>
 </LinearLayout>

 </RelativeLayout>

2.在layout中創(chuàng)建一個(gè)Android XML文件,把resource type改成Tween Animation。
(1)先實(shí)現(xiàn)Alpha透明的動(dòng)畫a.xml代碼如下:

 <?xml version="1.0" encoding="utf-8"?>
 <alpha
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:duration="2000"
android:repeatCount="3"
android:repeatMode="reverse"
xmlns:android="http://schemas.android.com/apk/res/android">
 </alpha>

(2)實(shí)現(xiàn)Rotate旋轉(zhuǎn)的動(dòng)畫r.xml代碼如下:

  <?xml version="1.0" encoding="utf-8"?>  
 <!-- android:pivotX="50%"
      android:pivotY="50%"相對(duì)于自身寬的一半進(jìn)行旋轉(zhuǎn)不能寫(0.5f)
      50%p——>相對(duì)于自身容器的X,Y為中心旋轉(zhuǎn) 
 -->
 <rotate 
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="3"
android:repeatMode="reverse"
android:duration="2000"
xmlns:android="http://schemas.android.com/apk/res/android"> 
 </rotate>

(3)實(shí)現(xiàn)Scale縮放的動(dòng)畫s.xml代碼如下:

  <?xml version="1.0" encoding="utf-8"?>
 <scale
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="2.5"
android:toYScale="2.5"
android:pivotX="50%"
android:pivotY="50%"
android:duration="2000"
android:repeatCount="3"
android:repeatMode="reverse"
xmlns:android="http://schemas.android.com/apk/res/android">
 </scale>

(4)實(shí)現(xiàn)Translate平移的動(dòng)畫t.xml代碼如下:

 <?xml version="1.0" encoding="utf-8"?>
 <translate
android:fromXDelta="-80%p"
android:fromYDelta="0%p"
android:toXDelta="80%p"
android:toYDelta="0%p"
android:duration="2000"
android:repeatCount="3"
android:repeatMode="reverse"
android:fillAfter="true"
xmlns:android="http://schemas.android.com/apk/res/android">
 </translate>

(5)實(shí)現(xiàn)多個(gè)動(dòng)畫結(jié)合在一起的效果all.xml代碼如下:

 <?xml version="1.0" encoding="utf-8"?>
 <set>
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:duration="2000"
android:repeatCount="3"
android:repeatMode="reverse"
xmlns:android="http://schemas.android.com/apk/res/android">
</alpha>
<rotate 
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="3"
android:repeatMode="reverse"
android:duration="2000"
xmlns:android="http://schemas.android.com/apk/res/android">
</rotate>
<scale
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="2.5"
android:toYScale="2.5"
android:pivotX="50%"
android:pivotY="50%"
android:duration="2000"
android:repeatCount="3"
android:repeatMode="reverse"
xmlns:android="http://schemas.android.com/apk/res/android">
</scale> 
 </set>

3.編寫界面交互代碼
在xml文件中定義好補(bǔ)間動(dòng)畫資源后,需要實(shí)現(xiàn)將動(dòng)畫資源設(shè)置到控件上。要實(shí)現(xiàn)該功能,需要在MainActivity中調(diào)用AnimationUtils類的loadAnimation()方法加載動(dòng)畫資源,并為圖片設(shè)置指定的動(dòng)畫。具體代碼如下所示:

 public class MainActivity extends Activity {
 ImageView img;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    img=(ImageView) findViewById(R.id.imageView1);
}

 public void Alpha(View view){
Animation aa=AnimationUtils.loadAnimation(this, R.anim.a);
img.startAnimation(aa);
 }
  public void Rotate(View view){
Animation ra=AnimationUtils.loadAnimation(this, R.anim.r);
img.startAnimation(ra);
 }
 public void Scale(View view){
Animation sa=AnimationUtils.loadAnimation(this, R.anim.s);
img.startAnimation(sa); 
 }
  public void Translate(View view){
Animation ta=AnimationUtils.loadAnimation(this, R.anim.t);
img.startAnimation(ta);
 }
 public void All(View view){
Animation all=AnimationUtils.loadAnimation(this, R.anim.all);
img.startAnimation(all);
 }
 }

本節(jié)知識(shí)點(diǎn):

 <!-- android:pivotX="50%"
  android:pivotY="50%"相對(duì)于自身寬的一半進(jìn)行旋轉(zhuǎn)不能寫(0.5f)
  50%p——>相對(duì)于自身容器的X,Y為中心旋轉(zhuǎn) 
 -->
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容