Animation effects can greatly improve the interactive effect of the interface. Therefore, animation application scenarios are more common in mobile development. Mastering basic animation effects is indispensable in mature software development. In addition, users are much more receptive to animation than text and pictures. Using animation effects can deepen users’ impression of the product. Therefore, this article gives several common animation effects in Android design.
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?. Picture special effects include graphics scaling, mirroring, reflection, rotation, translation, etc. The special effects processing method of pictures is achieved by multiplying the graphics matrix of the original picture by a special effects matrix to form a new graphics matrix. The Matrix class maintains a 3*3 matrix to change the coordinates of pixels. The screen coordinate system of the Android phone takes the upper left corner as the origin, from left to right as the positive x-axis direction, and from top to bottom as the positive y-axis direction. The first line represents the x coordinate of the pixel: x = 1*x + 0*y + 0*z, the second line represents the y coordinate of the pixel: y = 0*x + 1*y + 0*z, and the third line The rows represent the z-coordinates of the pixels: z = 0*x + 0*y + 1*z. The special effects processing of pictures is achieved by changing the value of the graphics matrix. Under Android, the Matrix class helps us encapsulate some basic usage of matrices, so we can use it directly. When editing images with code, it is best to process a copy of the image in memory instead of processing the original image. Therefore, you need to use Bitmap to create a blank bitmap with the same size and format as the original image.
??????? Basic steps for operating photos:
?? 1. Create a blank bitmap, save the width and height information consistent with the original image;
? 2. Create a drawing board;
? 3. Create a brush;
? 4. Settings matrix matrix;
5. Draw exactly the same look on the drawing paper according to the original picture.
The codes for image scaling, translation, rotation, and mirror operations are given below.
/** * 圖片縮放 * */ private void zoom() { Bitmap srcBitmap = BitmapFactory.decodeFile("mnt/sdcard/b.jpg"); iv_src.setImageBitmap(srcBitmap); Bitmap copyBitmap = Bitmap.createBitmap(srcBitmap.getWidth(), srcBitmap.getHeight(), srcBitmap.getConfig()); Canvas canvas = new Canvas(copyBitmap); Paint paint = new Paint(); paint.setColor(Color.BLACK); Matrix matrix = new Matrix(); matrix.setScale(0.6f, 0.6f); canvas.drawBitmap(srcBitmap, matrix, paint); iv_dest.setImageBitmap(copyBitmap); } /** * 圖片平移 * */ public void translation(){ Options ops = new Options(); ops.inSampleSize = 4; //等比放縮 Bitmap srcBitmap = BitmapFactory.decodeFile("/mnt/sdcard/b.jpg",ops); iv_src.setImageBitmap(srcBitmap); Bitmap copyBitmap = Bitmap.createBitmap(srcBitmap.getWidth(), srcBitmap.getHeight(), srcBitmap.getConfig()); Canvas canvas = new Canvas(copyBitmap); Paint paint = new Paint(); paint.setColor(Color.BLACK); Matrix matrix = new Matrix(); matrix.setTranslate(100, 100); canvas.drawBitmap(srcBitmap, matrix, paint); iv_dest.setImageBitmap(copyBitmap); } /** * 旋轉(zhuǎn) * */ public void scole(){ Bitmap srcBitmap = BitmapFactory.decodeFile("/mnt/sdcard/b.jpg"); iv_src.setImageBitmap(srcBitmap); Bitmap copyBitmap = Bitmap.createBitmap(srcBitmap.getWidth(), srcBitmap.getHeight(), srcBitmap.getConfig()); Canvas canvas = new Canvas(copyBitmap); Paint paint = new Paint(); paint.setColor(Color.BLACK); Matrix matrix = new Matrix(); matrix.setRotate(180, srcBitmap.getWidth()/2, srcBitmap.getHeight()/2);//繞原點(diǎn)旋轉(zhuǎn) canvas.drawBitmap(srcBitmap, matrix, paint); iv_dest.setImageBitmap(copyBitmap); } /** * 鏡面特效/倒影特效 * 原理一樣,一個(gè)關(guān)于x軸旋轉(zhuǎn),一個(gè)關(guān)于y軸旋轉(zhuǎn) */ public void mirror(){ Bitmap srcBitmap = BitmapFactory.decodeFile("/mnt/sdcard/b.jpg"); iv_src.setImageBitmap(srcBitmap); Bitmap copyBitmap = Bitmap.createBitmap(srcBitmap.getWidth(), srcBitmap.getHeight(), srcBitmap.getConfig()); Canvas canvas = new Canvas(copyBitmap); Paint paint = new Paint(); paint.setColor(Color.BLACK); Matrix matrix = new Matrix(); matrix.setScale(-1, 1); matrix.postTranslate(srcBitmap.getWidth(), 0); canvas.drawBitmap(srcBitmap, matrix, paint); iv_dest.setImageBitmap(copyBitmap); }
Next let’s get into today’s topic. Animation under Android is divided into three types: frame animation, View animation (tween animation), and attribute animation. These three animations are introduced below.
Frame animation:
Frame animation is the most common of these three animations, which refers to animation played frame by frame. To put it more bluntly, it is the effect of quickly switching pictures. It is implemented through animation-list and creates a Drawable sequence. These Drawables can be displayed one by one according to the specified time interval, that is, the pre-made images are played in sequence.基 Basic steps used in frame animation:
1. Create pictures required for each frame of frame animation, put in the corresponding Drawable-XXX or Drawable directory
2. In the DRAWABLE directory, create frame animation XML files, root nodes Select animation-list. The oneshot attribute represents the automatic execution of frame animation. If true, it means that the animation will only play once and stop on the last frame. If set to false, it means the animation will play in a loop.
3. Enable animation in JAVA code. Set it to the Background of View or the src of ImageView, then obtain the AnimationDrawable object of the control, and start the animation through the AnimationDrawable.start() method
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? - ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? to be set to the src of the View or the src of the ImageView, then get the AnimationDrawable object of the control and start the animation through the AnimationDrawable.start() method.
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? use ? use using ? ? ? ? ? ? ? use use ? using using using ’s out through out out out out out out out out out out out outmb out out out out out out out out out out off ’s ? ? ???? ?That is to say, systems running above API-11. Property animation will change the position of the current view and produce animation effects by dynamically changing the width, height, coordinates and other properties of the control.
Achieve animation effects by controlling the properties of controls. Property animation is much more flexible and powerful than tweening animation. It should be noted that property animation does not actually distinguish between displacement, scaling, transparency, rotation and other animations. Its core idea is just to modify the properties of a control. We can achieve the four effects of tween animation by modifying different properties.
屬性動(dòng)畫跟補(bǔ)間動(dòng)畫比,屬性動(dòng)畫是真正改變了控件的屬性,會(huì)改變當(dāng)前的視圖所在的位置,因此當(dāng)控件的位置改變后只要點(diǎn)擊到了控件“身上”就能觸發(fā)onClick 事件。而補(bǔ)間動(dòng)畫則并沒用改變控件的真實(shí)屬性,因此不管屬性動(dòng)畫執(zhí)行后將控件移動(dòng)到了哪個(gè)位置,只能通過(guò)點(diǎn)擊該控件的原始位置才能觸發(fā)onClick 事件。
通過(guò)xml 文件實(shí)現(xiàn)屬性動(dòng)畫步驟:
1. 在res 下創(chuàng)建屬性動(dòng)畫文件。在res 目錄下創(chuàng)建animator 文件夾,然后創(chuàng)建一個(gè)objectAnimator 資源文件。資源名稱自定義即可。
2. 編寫屬性動(dòng)畫文件。指定屬性值。
3. 編寫代碼使用屬性動(dòng)畫文件。通過(guò)AnimatorInflater加載圖片資源,指定要顯示動(dòng)畫的控件,并開啟動(dòng)畫。
屬性動(dòng)畫可以通過(guò)xml文件實(shí)現(xiàn),但通常屬性動(dòng)畫是通過(guò)JAVA代碼實(shí)現(xiàn)。這里僅給出用xml文件實(shí)現(xiàn)淡化動(dòng)畫的案例,其他案例均以JAVA代碼的方式實(shí)現(xiàn)。
JAVA代碼的方式實(shí)現(xiàn)屬性動(dòng)畫。
public class MainActivity extends Activity { private ImageView iv; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); iv = (ImageView) findViewById(R.id.iv); } /** * 淡化動(dòng)畫 * @param view */ public void alpha(View view) { ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "alpha", new float[] { 0.0f, 0.2f, 0.4f, 0.6f, 0.8f, 1.0f }); oa.setDuration(3000); oa.setRepeatCount(ObjectAnimator.INFINITE); oa.setRepeatMode(ObjectAnimator.REVERSE); oa.start(); } /** * 平移動(dòng)畫 * @param view */ public void trans(View view) { ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "translationX", new float[] { 10f, 20f, 30f, 40f, 60f, 80f }); oa.setDuration(3000); oa.setRepeatCount(ObjectAnimator.INFINITE); oa.setRepeatMode(ObjectAnimator.REVERSE); oa.start(); } /** * 縮放動(dòng)畫 */ public void scale(View view) { ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "scaleX", new float[] { 1f, 2f, 3f, 4f, 5f, 6f }); oa.setDuration(3000); oa.setRepeatCount(ObjectAnimator.INFINITE); oa.setRepeatMode(ObjectAnimator.REVERSE); oa.start(); } /** * 旋轉(zhuǎn)動(dòng)畫 */ public void rotate(View view) { ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "rotationY", new float[] { 90f, 180f, 270f, 360f }); oa.setDuration(3000); oa.setRepeatCount(ObjectAnimator.INFINITE); oa.setRepeatMode(ObjectAnimator.REVERSE); oa.start(); } /** * 水平平移 + 豎直平移 */ public void set(View view) { AnimatorSet set = new AnimatorSet(); ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "translationX", new float[] { 10f, 20f, 30f, 40f, 60f, 80f }); oa.setDuration(3000); ObjectAnimator oa2 = ObjectAnimator.ofFloat(iv, "translationY", new float[] { -10f, -20f, -30f, -40f, -60f, -80f }); oa2.setDuration(3000); set.playTogether(oa, oa2); set.start(); } }
xml文件實(shí)現(xiàn)淡化效果:
<?xml version="1.0" encoding="utf-8"?> <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:duration="3000" android:propertyName="alpha" android:repeatCount="3" android:repeatMode="reverse" android:valueFrom="0.0" android:valueTo="1.0" > </objectAnimator>
然后在java代碼中實(shí)現(xiàn)這樣一段代碼:
public void alpha(View view) { Animator animator = AnimatorInflater.loadAnimator(this, R.animator.alpha); animator.setTarget(iv); animator.start(); }
View動(dòng)畫:
漸變動(dòng)畫也叫補(bǔ)間動(dòng)畫。補(bǔ)間動(dòng)畫通過(guò)對(duì)View 的內(nèi)容進(jìn)行一系列的圖形變換(包括平移、縮放、旋轉(zhuǎn)、改變透明度)來(lái)實(shí)現(xiàn)動(dòng)畫效果。動(dòng)畫效果的定義可以采用XML 文件來(lái)做也可以采用java 代碼來(lái)做。
使用XML 文件實(shí)現(xiàn)View動(dòng)畫的步驟:
1. 在res 目錄下創(chuàng)建anim 文件夾。
2. 在anim 文件夾中創(chuàng)建xml文件,文件名可以自定義。
3. 編輯xml文件。定義不同的標(biāo)簽,表示不同的動(dòng)畫效果。alpha表示淡化,
4. 添加Java 邏輯代碼,使用AnimationUtils 工具類加載xml 文件,獲取Animation 對(duì)象,調(diào)用startAnimation 讓ImageView 執(zhí)行此動(dòng)畫。
View動(dòng)畫中常用屬性的含義:
duration 動(dòng)畫時(shí)長(zhǎng)
fromAlpha 起始透明度,1 為完全不透明,0 為完全透明
repeatCount 重復(fù)次數(shù),INFINITE表示無(wú)限重復(fù)
toAlpha 目標(biāo)透明度
repeatMode 重復(fù)模式,restart 為重新開始,reverse表示來(lái)回播放
漸變動(dòng)畫在代碼中使用的是AlphaAnimation 類來(lái)定義,在XML 文件中使用
使用編碼方式同樣可以實(shí)現(xiàn)view動(dòng)畫,直接創(chuàng)建相應(yīng)的動(dòng)畫對(duì)象,然后添加相應(yīng)的屬。代使用編碼方式實(shí)現(xiàn)view動(dòng)畫跟用XML 文件實(shí)現(xiàn)View動(dòng)畫其實(shí)是一模一樣的,無(wú)非就是在JAVA代碼中設(shè)定相關(guān)的屬性罷了。
使用XML 文件實(shí)現(xiàn)View動(dòng)畫的代碼:
1 . 在anim文件夾下新建下列文件:
<!-- alpha_demo.xml 文件夾下 --> <?xml version="1.0" encoding="utf-8"?> <alpha xmlns:android="http://schemas.android.com/apk/res/android" android:duration="2000" android:fromAlpha="0.0" android:repeatCount="infinite" android:repeatMode="reverse" android:toAlpha="1.0" > </alpha> <!-- rotate_demo.xml 文件夾下 --> <?xml version="1.0" encoding="utf-8"?> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="2000" android:fromDegrees="0" android:pivotX="50%" android:pivotY="50%" android:repeatCount="2" android:repeatMode="reverse" android:toDegrees="360" > </rotate> <!-- scale_demo.xml 文件夾下 --> <?xml version="1.0" encoding="utf-8"?> <scale xmlns:android="http://schemas.android.com/apk/res/android" android:duration="2000" android:fromXScale="20%" android:fromYScale="20%" android:pivotX="50%" android:pivotY="50%" android:repeatCount="2" android:repeatMode="reverse" android:toXScale="200%" android:toYScale="200%" > </scale> <!-- set_demo.xml 文件夾下 --> <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="true" > <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="2000" android:fromDegrees="0" android:pivotX="50%" android:pivotY="50%" android:repeatCount="2" android:repeatMode="reverse" android:toDegrees="360" > </rotate> <scale xmlns:android="http://schemas.android.com/apk/res/android" android:duration="2000" android:fromXScale="20%" android:fromYScale="20%" android:pivotX="50%" android:pivotY="50%" android:repeatCount="2" android:repeatMode="reverse" android:toXScale="200%" android:toYScale="200%" > </scale> </set> <!-- trans_demo.xml 文件夾下 --> <?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="2000" android:fromXDelta="0" android:fromYDelta="0" android:repeatCount="2" android:repeatMode="reverse" android:toXDelta="100%" android:toYDelta="100%" > </translate>
2 . 在java代碼中實(shí)現(xiàn)下列邏輯:
import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.view.View; import android.view.animation.Animation; import android.view.animation.AnimationUtils; import android.widget.ImageView; public class MainActivity extends Activity { private ImageView iv; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); iv = (ImageView) findViewById(R.id.iv); } /** * 淡化動(dòng)畫 * @param view */ public void alpha(View view){ Animation aa = AnimationUtils.loadAnimation(this, R.anim.alpha_demo); iv.startAnimation(aa); } /** * 平移動(dòng)畫 * @param view */ public void trans(View view){ Animation ta = AnimationUtils.loadAnimation(this, R.anim.trans_demo); iv.startAnimation(ta); } /** * 縮放動(dòng)畫 */ public void scale(View view){ Animation sa = AnimationUtils.loadAnimation(this, R.anim.scale_demo); iv.startAnimation(sa); } /** * 旋轉(zhuǎn)動(dòng)畫 */ public void rotate(View view){ Animation ra = AnimationUtils.loadAnimation(this, R.anim.rotate_demo); iv.startAnimation(ra); } /** * 旋轉(zhuǎn) + 放縮 */ public void set(View view){ Animation set = AnimationUtils.loadAnimation(this, R.anim.set_demo); iv.startAnimation(set); } }
使用java代碼實(shí)現(xiàn)View動(dòng)畫的代碼
import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.view.View; import android.view.animation.AlphaAnimation; import android.view.animation.Animation; import android.view.animation.AnimationSet; import android.view.animation.AnimationUtils; import android.view.animation.RotateAnimation; import android.view.animation.ScaleAnimation; import android.view.animation.TranslateAnimation; import android.widget.ImageView; public class MainActivity extends Activity { private ImageView iv; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); iv = (ImageView) findViewById(R.id.iv); } /** * 漸變動(dòng)畫 * @param view */ public void alpha(View view) { AlphaAnimation aa = new AlphaAnimation(0.0f, 1.0f); aa.setDuration(2000); aa.setRepeatCount(Animation.INFINITE); aa.setRepeatMode(Animation.REVERSE); iv.startAnimation(aa); } /** * 平移動(dòng)畫 * @param view */ public void trans(View view) { TranslateAnimation ta = new TranslateAnimation( Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 1f, Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 1f); ta.setDuration(2000); ta.setRepeatCount(Animation.INFINITE); ta.setRepeatMode(Animation.REVERSE); iv.startAnimation(ta); } /** * 縮放動(dòng)畫 */ public void scale(View view) { ScaleAnimation sa = new ScaleAnimation(0.2f, 2.0f, 0.2f, 2.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); sa.setDuration(2000); sa.setRepeatCount(Animation.INFINITE); sa.setRepeatMode(Animation.REVERSE); iv.startAnimation(sa); } /** * 旋轉(zhuǎn)動(dòng)畫 */ public void rotate(View view) { RotateAnimation ra = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); ra.setDuration(2000); ra.setRepeatCount(Animation.INFINITE); ra.setRepeatMode(Animation.REVERSE); iv.startAnimation(ra); } /** * 旋轉(zhuǎn) + 平移 + 放縮 * AnimationSet添加各個(gè)動(dòng)畫 */ public void set(View view) { AnimationSet set = new AnimationSet(false); RotateAnimation ra = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); ra.setDuration(2000); ra.setRepeatCount(Animation.INFINITE); ra.setRepeatMode(Animation.REVERSE); ScaleAnimation sa = new ScaleAnimation(0.2f, 2.0f, 0.2f, 2.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); sa.setDuration(2000); sa.setRepeatCount(Animation.INFINITE); sa.setRepeatMode(Animation.REVERSE); TranslateAnimation ta = new TranslateAnimation( Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 1f, Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 1f); ta.setDuration(2000); ta.setRepeatCount(Animation.INFINITE); ta.setRepeatMode(Animation.REVERSE); set.addAnimation(ta); set.addAnimation(sa); set.addAnimation(ra); iv.startAnimation(set); } }
?自此Android下的三種動(dòng)畫全部講解完畢。

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)