场景:点击桌面图标,图标放大,然后圆形进度旋转一圈结束,时间可控~~~
先理一下,启动"桌面动画"app,第一次启动在launcher上创建一个"点我点我"快捷图标,点击这个图标,动画开始!
1.创建桌面图标
public class App extends Application {
private static Context context;
public static Context getContext() {
return context;
}
public void onCreate() {
super.onCreate();
context = this;
if (Config.getIsFirstLaunch()) {
Intent intent = new Intent();
intent.setClass(this, LauncherActivity.class);
intent.setAction("com.snow.action.start");
ShortcutUtils.buildShortcut("点我点我", R.drawable.widget, intent, this);
Config.setIsFirstLaunch(false);
}
}
}
创建的时候用了一个异步线程,交给ScheduledThreadPoolExecutor执行器,首先要判断一下图标是否存在,创建过程:
给launcher发消息
private static boolean addShortcut(String name, int iconId, Context context, Intent intent) {
Intent intent1 = new Intent("com.android.launcher.action.INSTALL_SHORTCUT");
intent1.putExtra("duplicate", false);
intent1.putExtra("android.intent.extra.shortcut.NAME", name);
intent1.putExtra("android.intent.extra.shortcut.ICON", BitmapFactory.decodeResource(context.getResources(),
iconId));
intent1.putExtra("android.intent.extra.shortcut.ICON_RESOURCE", Intent.ShortcutIconResource.fromContext(
context, iconId));
intent1.putExtra("android.intent.extra.shortcut.INTENT", intent);
intent.addFlags(Intent.FLAG_ACTIVITY_NO_ANIMATION);//65536
context.sendBroadcast(intent1);
return true;
}
一条权限:
<uses-permission android:name="com.android.launcher.permission.INSTALL_SHORTCUT" />
好啦,点击图标,LauncherActivity启动,这个Activity是singleInstance单例模式,然后关键一点,主题配置成透明样式
<style name="Transparent" parent="@style/Theme.AppCompat">
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowAnimationStyle">@null</item>
<item name="android:actionBarStyle">@null</item>
<item name="actionBarStyle">@null</item>
</style>
接着看下布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.snow.cc.views.CircleAnimView
android:id="@+id/rocket_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/widget" />
</RelativeLayout>
没错就是一个相对布局,加一个自定义view.
widget是她的背景图,也就是火箭
问题来了,既然是相对布局,而动画效果,是背景图刚好在桌面icon的正上方(Z轴上来说),感觉就是桌面图标自己在变化,其实不然,只是公用了一个图片而已,那么怎么调整rocket_view的位置呢?
Rect rect = intent.getSourceBounds();//获取icon坐标信息
这里,桌面启动的时候,Launcher会通过setSourceBounds方法,设置图标的坐标信息并通过Intent发送出去,原来Launcher这么会玩...
有了Rect就可以调整rocket_view的位置了,考虑StatusBar的高度
private RelativeLayout.LayoutParams computeAnimationIconLayoutParams(View icon, Rect rect) {
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) icon.getLayoutParams();
layoutParams.topMargin = rect.top - this.getStatusBarHeight();
layoutParams.leftMargin = rect.left;
layoutParams.width = rect.right - rect.left;
layoutParams.height = layoutParams.width;
return layoutParams;
}
好了,进入动画知识了
rocketView.startAnimation(360, new Animation.AnimationListener() {
@Override
public void onAnimationEnd(Animation animation) {
finish();//动画结束,自己退出
overridePendingTransition(0, 0);
}
...
});
360度刚好一圈,结束了,使命就完成了额~~~
自定义CircleAnimView继承自View
这里扫描角从0度到360度,借助了动画api
class OpenAnimation extends Animation {
float sweepAngle;
public OpenAnimation(int sweepAngle, long duration) {
super();
this.sweepAngle = ((float) sweepAngle);
this.setDuration(duration);
this.setInterpolator(new AccelerateDecelerateInterpolator());
}
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
CircleAnimView.this.currentAngle = this.sweepAngle * interpolatedTime;
CircleAnimView.this.invalidate();
Log.e(TAG, "OpenAnimation :" + interpolatedTime + " " + currentAngle);
...
}
}
在绘制Animation的过程中会反复的调用applyTransformation函数，每次调用参数interpolatedTime值都会变化，从0渐 变为1，当该参数为1时表明动画结束。通过参数Transformation 来获取变换的矩阵（matrix），通过改变矩阵就可以实现各种复杂的效果。
但是这里只关心interpolatedTime,初始话的时候sweepAngle扫描角度为360度,当然是可控的
rocketView.startAnimation(360, new Animation.AnimationListener() {...});
动画的插值器指定为AccelerateDecelerateInterpolator:
/** * An interpolator where the rate of change starts and ends slowly but * accelerates through the middle. */
在动画开始与结束的地方速率改变比较慢，在中间的时候加速
每次计算当前扫描角度,然后invalidate(),会引起View的
onDraw(Canvas canvas) 方法调用,那我们就在这个方法里根据当前弧度计算圆弧和小白点的位置:
private void computePosition() {
int w = ((int) ((((double) this.getWidth())) * RATE_CIRCLE));//进度环所在区域宽度
int h = ((int) ((((double) this.getHeight())) * RATE_CIRCLE));//进度环所在区域高度
int diameter = w > h ? h : w;//调整圆环的直径
this.centerX = ((float) (this.getWidth() / 2));//中心点x
this.centerY = ((float) (this.getHeight() / 2));//中心点y
this.radius = ((float) (diameter / 2));//圆环的半径
this.endPointRadius = ((int) ((((double) this.radius)) * RATE_RADIUS_ENDPOINT));//小白球的半径
this.paintWidth = ((int) ((((double) this.radius)) * RATE_RADIUS_PAINT_WIDTH));
this.left = this.centerX - this.radius;//圆环的左边距
this.right = this.centerX + this.radius;//圆环的右边距
this.top = this.centerY - this.radius;//圆环的顶边距
this.bottom = this.centerY + this.radius;//圆环的底边距
}
位置,尺寸都有了,就可以用画笔画了:
画圆弧进度
canvas.drawArc(new RectF(this.left, this.top, this.right, this.bottom), ZERO_ANGLE, this.currentAngle,
false, this.progressPaint);
画小白球
private void drawProgressBarPoint(Canvas canvas) {
float angle = inOpeningAnimation ? currentAngle : endAngle;
this.endX = (float) Math.sin(Math.toRadians(angle)) * radius + centerX;
this.endY = (float) Math.sin(Math.toRadians(angle) - Math.PI / 2) * radius + centerY;
canvas.drawCircle(endX, endY, ((float) endPointRadius), endPointPaint);//1.570796
}
这里要把角度转换成对应的弧度值,靠Math.toRadians这个方法了
再回顾一下弧度和角度,我发现这些都还给数学老师了@~@
它们的关系可用下式表示和计算： 角（弧度）＝ 弧长/半径
圆的周长是半径的 2π倍，所以一个周角（360度）是 2π弧度。 半圆的长度是半径的 π倍，所以一个平角（180度）是 π弧度。
定了中心点和半径,有了画笔,就drawCircle啦!!!
