Android中常用動畫效果
What is Animation?
Animation
extends Object
implements Cloneable
Abstraction for an Animation that can be applied to Views, Surfaces, or other objects.
AlphaAnimation
extends Animation
An animation that controls the alpha level of an object. Useful for fading things in and out. This animation ends up changing the alpha property of aTransformation
AlphaAnimation(Context context, AttributeSet attrs)
Constructor used when an AlphaAnimation is loaded from a resource.
AlphaAnimation(float fromAlpha, float toAlpha)
Constructor to use when building an AlphaAnimation from code
AnimationSet
extends Animation
Represents a group of Animations that should be played together. The transformation of each individual animation are composed together into a single transform. If AnimationSet sets any properties that its children also set (for example, duration or fillBefore), the values of AnimationSet override the child values.
在程式碼中實現動畫效果的方法:
ImageView imageView = (ImageView) findViewById(R.id.imageView1); AnimationSet animationSet = new AnimationSet(true); AlphaAnimation alphaAnimation = new AlphaAnimation(0, 1); alphaAnimation.setDuration(1000); alphaAnimation.setStartOffset(10000); animationSet.addAnimation(alphaAnimation); //animationSet.setStartOffset(10000); animationSet.setFillBefore(false); animationSet.setFillAfter(true); imageView.startAnimation(animationSet);
在XML檔案中實現動畫效果的方法:
① 在res目錄下建立一個anim資料夾,在裡面新增一個alpha.xml檔案:
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator" android:fillAfter="true" android:fillBefore="false"> <alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:startOffset="1000" android:duration="1000" /> </set>
② 在Activity中使用AnimationUtils獲取Animation並進行設定:
Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.alpha); imageView.startAnimation(animation);
ScaleAnimation
extends Animation
An animation that controls the scale of an object. You can specify the point to use for the center of scaling.
ScaleAnimation(Context context, AttributeSet attrs)
Constructor used when a ScaleAnimation is loaded from a resource.
ScaleAnimation(float fromX, float toX, float fromY, float toY)
Constructor to use when building a ScaleAnimation from code
ScaleAnimation(float fromX, float toX, float fromY, float toY, float pivotX, float pivotY)
Constructor to use when building a ScaleAnimation from code
ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
Constructor to use when building a ScaleAnimation from code
在程式碼中實現動畫效果:
ImageView imageView = (ImageView) findViewById(R.id.imageView1); AnimationSet animationSet = new AnimationSet(true); ScaleAnimation scaleAnimation = new ScaleAnimation(1, 0.5f, 1, 0.5f, Animation.RELATIVE_TO_SELF, 1f, Animation.RELATIVE_TO_SELF, 1f); animationSet.addAnimation(scaleAnimation); animationSet.setDuration(1000); imageView.startAnimation(animationSet);
在XML檔案中實現動畫效果的方法:
① 在res的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="2000" /> </set>
② 在Activity中使用AnimationUtils獲取Animation並進行設定:
Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.scale); imageView.startAnimation(animation);
RotateAnimation
extends Animation
An animation that controls the rotation of an object. This rotation takes place int the X-Y plane. You can specify the point to use for the center of the rotation, where (0,0) is the top left point. If not specified, (0,0) is the default rotation point.
RotateAnimation(Context context, AttributeSet attrs)
Constructor used when a RotateAnimation is loaded from a resource.
RotateAnimation(float fromDegrees, float toDegrees)
Constructor to use when building a RotateAnimation from code.
RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY)
Constructor to use when building a RotateAnimation from code
RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
Constructor to use when building a RotateAnimation from code
在程式碼中實現動畫效果:
ImageView imageView = (ImageView) findViewById(R.id.imageView1); AnimationSet animationSet = new AnimationSet(true); RotateAnimation rotateAnimation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_PARENT, 0.5f, Animation.RELATIVE_TO_PARENT, 0.5f); rotateAnimation.setDuration(1000); animationSet.addAnimation(rotateAnimation); imageView.startAnimation(animationSet);
在XML檔案中實現動畫效果的方法:
① 在res的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>
② 在Activity中使用AnimationUtils獲取Animation並進行設定:
Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.rotate); imageView.startAnimation(animation);
TranslateAnimation
extends Animation
An animation that controls the position of an object.
TranslateAnimation(Context context, AttributeSet attrs)
Constructor used when a TranslateAnimation is loaded from a resource.
TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
Constructor to use when building a TranslateAnimation from code
TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue, int fromYType, float fromYValue, int toYType, float toYValue)
Constructor to use when building a TranslateAnimation from code
在程式碼中實現動畫效果:
ImageView imageView = (ImageView) findViewById(R.id.imageView1); AnimationSet animationSet = new AnimationSet(true); TranslateAnimation translateAnimation = new TranslateAnimation( Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 1.0f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 1.0f); translateAnimation.setDuration(1000); animationSet.addAnimation(translateAnimation); imageView.startAnimation(animationSet);
在XML檔案中實現動畫效果的方法:
① 在res的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%p" android:toXDelta="100%p" android:fromYDelta="0%p" android:toYDelta="100%p" android:duration="1000" /> </set>
其中100%p表示相對於父空間的位置
② 在Activity中使用AnimationUtils獲取Animation並進行設定:
Animation animation = (Animation) AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate); imageView.startAnimation(animation);
AnimationSet animationSet = new AnimationSet(false); AlphaAnimation alpha = new AlphaAnimation(1.0f, 0.0f); ScaleAnimation scale = new ScaleAnimation(1, 0.5f, 1, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); animationSet.addAnimation(alpha); animationSet.addAnimation(scale); animationSet.setDuration(2000); animationSet.setStartOffset(1000); animationSet.setFillAfter(true); imageView.startAnimation(animationSet);
alpha.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator" android:shareInterpolator="true" android:fillAfter="true"> <alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:startOffset="1000" android:fillAfter="true" android:duration="2000" /> <scale android:fromXScale="1.0" android:toXScale="0.5" android:fromYScale="1.0" android:toYScale="0.5" android:pivotX="50%" android:pivotY="50%" android:startOffset="1000" android:duration="2000" /> </set>
Activity中的程式碼:
Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.alpha); imageView.startAnimation(animation);
什麼是Interpolator
Interpolator
extends Object
AccelerateDecelerateInterpolator:
AccelerateDecelerateInterpolator
extends Object
implements Interpolator
An interpolator where the rate of change starts and ends slowly but accelerates through the middle.
AccelerateInterpolater:
AccelerateInterpolator
extends Object
implements Interpolator
An interpolator where the rate of change starts out slowly and and then accelerates.
CycleInterpolator:
CycleInterpolator
extends Object
implements Interpolator
Repeats the animation for a specified number of cycles. The rate of change follows a sinusoidal pattern.
DecelerateInterpolator:
DecelerateInterpolator
extends Object
implements Interpolator
An interpolator where the rate of change starts out quickly and and then decelerates.
LinearInterpolator:
LinearInterpolator
extends Object
implements Interpolator
An interpolator where the rate of change is constant.
XML檔案定義在set標籤裡或每個動畫標籤
set標籤中定義:
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator" android:shareInterpolator="true" android:fillAfter="true">
每個動畫標籤中定義:
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator" android:shareInterpolator="false" android:fillAfter="true"> <alpha android:interpolator="@android:anim/accelerate_interpolator" android:fromAlpha="1.0" android:toAlpha="0.0" android:startOffset="1000" android:fillAfter="true" android:duration="2000" /> <scale android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:fromXScale="1.0" android:toXScale="0.5" android:fromYScale="1.0" android:toYScale="0.5" android:pivotX="50%" android:pivotY="50%" android:startOffset="1000" android:duration="2000" /> </set>
在程式碼中設定:
AnimationSet animationSet = new AnimationSet(true); animationSet.setInterpolator(new AccelerateInterpolator());
或者分別為每個動畫設定:
AnimationSet animationSet = new AnimationSet(false); AlphaAnimation alpha = new AlphaAnimation(1.0f, 0.0f); alpha.setInterpolator(new AccelerateInterpolator()); ScaleAnimation scale = new ScaleAnimation(1, 0.5f, 1, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); scale.setInterpolator(new AccelerateDecelerateInterpolator());
① 準備4張圖片run1.png,run2.png,run3.png,run4.png分別放到res的三個drawable資料夾中
② 在res的drawable-ldpi目錄下建立一個anim_run.xml檔案:
<?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/run1" android:duration="100" /> <item android:drawable="@drawable/run2" android:duration="100" /> <item android:drawable="@drawable/run3" android:duration="100" /> <item android:drawable="@drawable/run4" android:duration="100" /> </animation-list>
③ 在Activity中使用xml檔案設定ImageView控制元件imageView的背景源,並獲取AnimationDrawable進行顯示動畫:
imageView.setBackgroundResource(R.drawable.anim_run); AnimationDrawable animationDrawable = (AnimationDrawable)imageView.getBackground(); animationDrawable.start();
什麼是LayoutAnimationController?
LayoutAnimationController
extends Object
A layout animation controller is used to animated a layout's, or a view group's, children. Each child uses the same animation but for every one of them, the animation starts at a different time. A layout animation controller is used by ViewGroup to compute the delay by which each child's animation start must be offset. The delay is computed by using characteristics of each child, like its index in the view group. This standard implementation computes the delay by multiplying a fixed amount of miliseconds by the index of the child in its parent view group. Subclasses are supposed to override getDelayForView(android.view.View) to implement a different way of computing the delay. For instance, aGridLayoutAnimationController will compute the delay based on the column and row indices of the child in its parent view group. Information used to compute the animation delay of each child are stored in an instance of LayoutAnimationController.AnimationParameters, itself stored in theViewGroup.LayoutParams of the view.
在使用LayoutAnimationController控制ListView控制元件的樣式效果的方法:
① 在res的anim資料夾中建立一個list_anim.xml檔案用於控制ListView控制元件的動畫:
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator" android:shareInterpolator="true"> <scale android:fromXScale="0.0" android:toXScale="1.0" android:fromYScale="0.0" android:toYScale="1.0" android:pivotX="50%" android:pivotY="50%" android:duration="1000" /> </set>
② 建立一個佈局檔案item.xml用於設定ListView的item的樣式:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal" android:paddingLeft="10dip" android:paddingRight="10dip" android:paddingTop="1dip" android:paddingBottom="1dip"> <TextView android:id="@+id/user_name" android:layout_width="180dip" android:layout_height="30dip" android:textSize="10pt" android:singleLine="true" /> <TextView android:id="@+id/user_id" android:layout_width="fill_parent" android:layout_height="fill_parent" android:textSize="10pt" android:singleLine="true"/> </LinearLayout>
③ 在主Activity的佈局檔案main.xml中新增一個ListView
<ListView android:id="@id/android:list" android:layout_width="fill_parent" android:layout_height="wrap_content" android:scrollbars="vertical" android:layoutAnimation="@anim/anim_layout" />
④ 建立一個MainActivity繼承ListActivity,並在onCreate方法中新增如下程式碼:
ListView listView = getListView(); List<HashMap<String, String>> list = new ArrayList<HashMap<String, String>>(); HashMap<String, String> hm1 = new HashMap<String, String>(); hm1.put("user_name", "arthinking"); hm1.put("user_id", "001"); HashMap<String, String> hm2 = new HashMap<String, String>(); hm2.put("user_name", "Jason"); hm2.put("user_id", "002"); list.add(hm1); list.add(hm2); SimpleAdapter simpleAdapter = new SimpleAdapter(this, list, R.layout.item, new String[] { "user_name", "user_id" }, new int[] { R.id.user_name, R.id.user_id }); listView.setAdapter(simpleAdapter); //通過Animation獲取LayoutAnimationController對ListView進行設定 Animation animation = (Animation)AnimationUtils.loadAnimation(MainActivity.this, R.anim.list_anim); LayoutAnimationController lac = new LayoutAnimationController(animation); lac.setOrder(LayoutAnimationController.ORDER_NORMAL); lac.setDelay(0.5f); listView.setLayoutAnimation(lac);
這樣,執行程式,顯示的ListView就會按照xml檔案中預置的動畫效果顯示了。
也可以通過xml檔案進行設定動畫:
① 在以上步驟的基礎之上,在res/anim資料夾下建立一個anim_layout.xml檔案:
<?xml version="1.0" encoding="utf-8"?> <layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android" android:delay="1" android:animationOrder="normal" android:animation="@anim/list_anim" />
② main在佈局檔案的的ListView新增如下屬性:
android:layoutAnimation="@anim/anim_layout"
這樣就在把MainActivity的onCreate()方法中的
//通過Animation獲取LayoutAnimationController對ListView進行設定
註釋後的程式碼刪除了,直接使用xml進行動畫的控制。
Animation.AnimationListener
android.view.animation.Animation.AnimationListener
An animation listener receives notifications from an animation. Notifications indicate animation related events, such as the end or the repetition of the animation.
包含以下的三個方法:
Notifies the end of the animation.
onAnimationRepeat(Animation animation)
Notifies the repetition of the animation.
onAnimationStart(Animation animation)
Notifies the start of the animation.
① 可以為一個Button新增一個事件:
button.setOnClickListener(new TestAnimationListener());
② 接下來是編寫這個TestAnimationListener類,繼承AnimationListener,並覆蓋裡面的三個方法:
//這裡獲取控制元件組,R.id.layoutId為main.xml的整體佈局標籤的id屬性值 ViewGroup viewGroup = (ViewGroup)findViewById(R.id.layoutId); private class RemoveAnimationListener implements AnimationListener{ //該方法在淡出效果執行結束之後被呼叫 @Override public void onAnimationEnd(Animation animation) { //假設這裡要在動畫執行完之後刪除一個TextView viewGroup.removeView(textView); } @Override public void onAnimationRepeat(Animation animation) { System.out.println("onAnimationRepeat"); } @Override public void onAnimationStart(Animation animation) { System.out.println("onAnimationStart"); } }
③ 同樣的,在動畫效果中新增控制元件可以按照如下實現
ScaleAnimation scale = new ScaleAnimation(1, 0.5f, 1, 0.5f, scale.setDuration(1000); scale.setStartOffset(100); TextView textView = new TextView(MainActivity.this); textView.setText("add"); viewGroup.addView(textView, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT)); textView.startAnimation(scale);
本文連結:http://www.itzhai.com/android-animation-used-to-achieve-control-of-animation-effects-and-use-of-interpolator-and-animationlistener.html
相關文章
- Vue 常用 transition 動畫效果記錄Vue動畫
- 動畫效果Animation-android動畫Android
- Android動畫效果之Tween Animation(補間動畫)Android動畫
- Android動畫效果之Frame Animation(逐幀動畫)Android動畫
- Android中ScrollView實現拖拽反彈效果動畫AndroidView動畫
- Android動畫效果之初識Property Animation(屬性動畫)Android動畫
- 常用PowerPoint動畫效果及設定方法動畫
- Android切換Activity的動畫效果Android動畫
- android: slide 滑動動畫效果AndroidIDE動畫
- Android 為PopupWindow設定動畫效果Android動畫
- Android動畫效果之自定義ViewGroup新增布局動畫Android動畫View
- Android動畫效果之Property Animation進階(屬性動畫)Android動畫
- Android輕鬆搞定Dialog提示動畫效果Android動畫
- Android 進出activity的滑動動畫效果Android動畫
- 【Android 動畫】動畫詳解之仿微信檢視大圖效果(四)Android動畫
- jQuery 效果 – 動畫jQuery動畫
- UGUI動畫效果UGUI動畫
- Android 中如何使用動畫Android動畫
- Android SeekBar 自定義thumb,thumb旋轉動畫效果Android動畫
- JS動畫效果——多物體動畫JS動畫
- jQuery 動畫效果 與 動畫佇列jQuery動畫佇列
- 200多種Android動畫效果的強悍框架Android動畫框架
- Android仿QQ視窗的抖動的動畫效果Android動畫
- Android中的Drawable和動畫Android動畫
- jQuery 效果 – 停止動畫jQuery動畫
- JavaScript元素動畫效果JavaScript動畫
- 短視訊系統,Android 使用MotionLayout實現動畫效果Android動畫
- jQuery動畫效果的刪除行效果jQuery動畫
- PPT中如何實現川流不息的動畫效果動畫
- Android 屬性動畫Property Animation(中)Android動畫
- css3常用動畫+動畫庫CSSS3動畫
- SVG 漸變動畫效果SVG動畫
- JavaScript 簡單動畫效果JavaScript動畫
- React實現動畫效果React動畫
- JavaScript 動畫效果例項JavaScript動畫
- vue-lottie動畫效果Vue動畫
- Javascript實現動畫效果JavaScript動畫
- JS Tween動畫效果研究 :JS動畫