Android動畫圖標――I am not a gif maker,I am a developer
來源：程序員人生 發布時間：2014-11-03 09:11:14 閱讀次數：3612次
最早在git上發現1個很酷眩的動畫圖標效果：
https://github.com/xuyisheng/tickplusdrawable
不能不說，國外的http://www.jyygyx.com在細節的斟酌上，確切比我們要好很多，ok，今天我們就來模仿下這個：
現來看看我們的效果，別噴我，就寫了個把小時，很多細節還沒斟酌全，代碼也還沒重構，希望大家能提出修改意見，thx～
gif效果不1定好，大家可以參考github的gif。
代碼以下：
首先我們要來了解下原理：
1、我們首先來肯定1些關鍵點的坐標，也就是我們要顯示的圖形的所有出現的頂點
2、線條的移動效果，我們使用屬性動畫來控制，不熟習的朋友可以看看http://blog.csdn.net/eclipsexys/article/details/38401641，通過這個例子大家應當會對屬性動畫有更深的理解了
3、對沒有提供get、set方法的屬性，我們通太重寫Property來幫助這個屬性增加get、set方法
了解了以上內容，就能夠來看具體的代碼了：
package com.example.yishengxu.canvas;
import android.animation.ObjectAnimator;
import android.animation.TypeEvaluator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PointF;
import android.util.AttributeSet;
import android.util.Property;
import android.view.MotionEvent;
import android.view.View;
import java.util.ArrayList;
import java.util.List;
/**
* Created by yisheng.xu on 10/30/14.
*/
public class CanvasView extends View {
private float mPaddingW;
private float mPaddingH;
private float mRotation;
private List<PointF> mAllPoints = new ArrayList<PointF>();
private PointF mPoint0;
private PointF mPoint1;
private PointF mPoint2;
private PointF mPoint3;
private PointF mPoint4;
private PointF mPoint5;
private PointF mPoint6;
private PointF mPoint7;
private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
private int touchFlag = 0;
public CanvasView(Context context) {
super(context);
}
public CanvasView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CanvasView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
mPaddingW = w / 4;
mPaddingH = h / 4;
mAllPoints.add(new PointF(mPaddingW, mPaddingH));
mAllPoints.add(new PointF(mPaddingW * 3, mPaddingH));
mAllPoints.add(new PointF(mPaddingW, mPaddingH * 2));
mAllPoints.add(new PointF(mPaddingW * 3, mPaddingH * 2));
mAllPoints.add(new PointF(mPaddingW, mPaddingH * 3));
mAllPoints.add(new PointF(mPaddingW * 3, mPaddingH * 3));
mAllPoints.add(new PointF(mPaddingW * 2, mPaddingH));
mAllPoints.add(new PointF(mPaddingW * 2, mPaddingH * 3));
initPoints();
mPaint.setColor(Color.BLUE);
mPaint.setStrokeWidth(20);
mPaint.setStrokeCap(Paint.Cap.ROUND);
super.onSizeChanged(w, h, oldw, oldh);
}
private void initPoints() {
mPoint0 = new PointF(mAllPoints.get(0).x, mAllPoints.get(0).y);
mPoint1 = new PointF(mAllPoints.get(1).x, mAllPoints.get(1).y);
mPoint2 = new PointF(mAllPoints.get(2).x, mAllPoints.get(2).y);
mPoint3 = new PointF(mAllPoints.get(3).x, mAllPoints.get(3).y);
mPoint4 = new PointF(mAllPoints.get(4).x, mAllPoints.get(4).y);
mPoint5 = new PointF(mAllPoints.get(5).x, mAllPoints.get(5).y);
mPoint6 = new PointF();
mPoint7 = new PointF();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.save();
canvas.rotate(180 * mRotation, mPaddingW * 2, mPaddingH * 2);
drawLine(canvas, mPoint0, mPoint1);
drawLine(canvas, mPoint2, mPoint3);
drawLine(canvas, mPoint4, mPoint5);
drawLine(canvas, mPoint6, mPoint7);
canvas.restore();
}
private void drawLine(Canvas canvas,PointF start,PointF end) {
if (start.x!=0 && end.x !=0) {
canvas.drawLine(start.x, start.y, end.x, end.y, mPaint);
}
}
@Override
public boolean onTouchEvent(MotionEvent event) {
if (touchFlag == 0) {
animPoints(mPoint0, mAllPoints.get(2));
animPoints(mPoint4, mAllPoints.get(2));
animPoints(mPoint1, mAllPoints.get(6));
animPoints(mPoint5, mAllPoints.get(7));
touchFlag += 1;
}else if (touchFlag == 1) {
resetPoints();
touchFlag += 1;
}else if (touchFlag == 2) {
animPoints(mPoint0, mAllPoints.get(4));
animPoints(mPoint4, mAllPoints.get(0));
mPoint2 = new PointF(0, 0);
mPoint3 = new PointF(0, 0);
invalidate();
touchFlag += 1;
} else if (touchFlag == 3) {
resetPoints();
touchFlag += 1;
} else {
animPoints(mPoint0, mAllPoints.get(6));
animPoints(mPoint1, mAllPoints.get(3));
animPoints(mPoint5, mAllPoints.get(6));
mPoint2 = new PointF(0, 0);
mPoint3 = new PointF(0, 0);
invalidate();
touchFlag = 1;
}
return super.onTouchEvent(event);
}
private void resetPoints() {
animPoints(mPoint0, mAllPoints.get(0));
animPoints(mPoint1, mAllPoints.get(1));
animPoints(mPoint2, mAllPoints.get(2));
animPoints(mPoint3, mAllPoints.get(3));
animPoints(mPoint4, mAllPoints.get(4));
animPoints(mPoint5, mAllPoints.get(5));
}
private void animPoints(final PointF start, final PointF end) {
ValueAnimator animator = ValueAnimator.ofObject(new TypeEvaluator<PointF>() {
@Override
public PointF evaluate(float v, PointF o, PointF o2) {
start.x = start.x + (end.x - start.x) * v;
start.y = start.y + (end.y - start.y) * v;
invalidate();
return null;
}
}, start, end);
animator.setDuration(1000);
animator.start();
ObjectAnimator animator1 = ObjectAnimator.ofFloat(this, mRotationProperty, 0, 1F);
animator1.setDuration(500);
animator1.start();
}
private Property<CanvasView, Float> mRotationProperty = new Property<CanvasView, Float>(Float.class, "rotation") {
@Override
public Float get(CanvasView object) {
return object.mRotation;
}
@Override
public void set(CanvasView object, Float value) {
object.mRotation = value;
}
};
}
布局文件和主文件很簡單：<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"
android:paddingLeft="50dp"
android:paddingRight="50dp"
android:paddingTop="150dp"
android:paddingBottom="150dp"
tools:context=".MainActivity">
<view
android:layout_width="wrap_content"
android:layout_height="wrap_content"
class="com.example.yishengxu.canvas.CanvasView"
android:id="@+id/view"
android:layout_alignParentStart="true" />
</RelativeLayout>
package com.example.yishengxu.canvas;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
OK，關鍵還是要有頭腦，有idea，在現有知識的基礎上，加工、創造。現在，5.0來了，新增了Vector Drawable，和對SVG的支持，讓我們對實現更復雜的路徑軌跡動畫效果，有了更強大的工具。
最后，打個廣告――友誼鏈接 HZTalk~非常好的，說科技、聊電影、游戲，真獨立，非客觀，第3方.
以上。
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
