效果图
- 实现思路
循环添加一个自定义的ImageView,每个ImageView随机设置不同颜色的Bitmap,并且有一个放大的动画,比较简单。然后ImageView的移动轨迹使用贝塞尔曲线来完成。最后一个缩小到动画,动画结束移除控件。
public HeartView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
Bitmap bm = BitmapUtil.createHeart(context);
setImageBitmap(bm);
}
在三个参数的构造方法里设置Bitmap,Btimap通过工具类BitmapUtil来创建,下面是这个工具类
public class BitmapUtil {
private static final Paint sPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
private static final Canvas sCanvas = new Canvas();
private static Random mRandom = new Random();
public static Bitmap createHeart(Context context) {
Bitmap heart = BitmapFactory.decodeResource(context.getResources(), R.drawable.heart);
Bitmap heartBorder = BitmapFactory.decodeResource(context.getResources(), R.drawable.heart_border);
Bitmap bm = Bitmap.createBitmap(heartBorder.getWidth(), heartBorder.getHeight(), Bitmap.Config.ARGB_8888);
if (bm == null) {
return null;
}
Canvas canvas = sCanvas;
canvas.setBitmap(bm);
Paint p = sPaint;
// 画边框
canvas.drawBitmap(heartBorder, 0, 0, p);
// 随机生成爱心颜色
int color = Color.rgb(mRandom.nextInt(255), mRandom.nextInt(255), mRandom.nextInt(255));
// 设置ColorFilter
p.setColorFilter(new PorterDuffColorFilter(color, PorterDuff.Mode.SRC_ATOP));
float dx = (heartBorder.getWidth() - heart.getWidth()) / 2f;
float dy = (heartBorder.getHeight() - heart.getHeight()) / 2f;
// 因为边框图片比爱心图片大,爱心会在边框的中间
canvas.drawBitmap(heart, dx, dy, p);
p.setColorFilter(null);
canvas.setBitmap(null);
return bm;
}
}
这是工具类中设计的两个图片,这个工具类是当初做这个东西的时候在网上找的,链接忘记了,上面有都有注释
@Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
int width = getDrawable().getIntrinsicWidth();
int height = getDrawable().getIntrinsicHeight();
// 控制自己在父控件中的位置
ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) getLayoutParams();
params.leftMargin = (ScreenUtils.getScreenWidth(getContext()) - width) / 2;
// 这个值可以适当的改一下
params.topMargin = ScreenUtils.getScreenHeight(getContext()) - height * 3;
setLayoutParams(params);
zoom();
}
当控件绑定到Window的时候会调用这个方法,在这个方法中初始化控件的坐标,控制控件的初始位置在底部居中。然后执行一个放大的动画。
/**
* 放大动画
*/
private void zoom() {
AnimatorSet set = new AnimatorSet();
ObjectAnimator scaleXAnim = scaleX(0.0f, 1.0f);
ObjectAnimator scaleYAnim = scaleY(0.0f, 1.0f);
set.play(scaleXAnim).with(scaleYAnim);
set.start();
set.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
// 动画结束之后,
bezier();
}
});
}
放大动画比较简单,在动画结束后调用bezier方法,也是实现的重点
private void bezier() {
final int width = getDrawable().getIntrinsicWidth();
final int height = getDrawable().getIntrinsicHeight();
final int screentWidth = ScreenUtils.getScreenWidth(getContext());
final int screenHeight = ScreenUtils.getScreenHeight(getContext());
final Random random = new Random();
// 设置贝塞尔曲线的起始坐标和控制坐标
// 开始坐标与onAttachedToWindow中的初始坐标一致
// 结束坐标
float startX = (screentWidth- width) / 2;
float startY = screenHeight - height * 3f;
float stopX = random.nextInt(screentWidth);
float stopY = 0;
float controlX = random.nextInt(screentWidth);
float controlY = ScreenUtils.getScreenHeight(getContext()) / 2;
Path path = new Path();
path.moveTo(startX, startY);
path.quadTo(controlX, controlY, stopX, stopY);
BezierEvaluator evaluator = new BezierEvaluator(new PointF(controlX, controlY));
final PointF start = new PointF(startX, startY);
final PointF stop = new PointF(stopX, stopY);
ValueAnimator animator = ValueAnimator.ofObject(evaluator, start, stop);
animator.setDuration(3000);
animator.addUpdateListener(this);
animator.addListener(new AnimatorListenerAdapter(){
@Override
public void onAnimationEnd(Animator animation) {
shrink();
}
});
animator.start();
}
使用二阶贝塞尔曲线,首先设置起点坐标与初始化坐标一致,然后设置终点坐标,想法是移动到顶部,所以stopY一直为0,stopX设置为random.nextInt(screentWidth)不超过宽度的一个随机大小,因为不想落下同一个位置,控制点也是一个意思,大致在窗口的中间位置。然后通过属性动画获取到这条曲线上的坐标,这里使用一个带有TypeEvaluator参数的方法来构造一个属性动画。那么TypeEvaluator的作用到底是什么呢?简单来说,就是告诉动画系统如何从初始值过度到结束值。最后这句来自大神郭霖的博客 下面是这个自定义的TypeEvaluator的内容:
public class BezierEvaluator implements TypeEvaluator<PointF> {
private PointF mControlPointF;
public BezierEvaluator(PointF controlPointF) {
mControlPointF = controlPointF;
}
@Override
public PointF evaluate(float fraction, PointF startValue, PointF endValue) {
return BezierUtil.CalculateBezierPointForQuadratic(fraction, startValue, mControlPointF, endValue);
}
}
BezierUtil来自大神徐宜生的慕课网课程 然后在动画过程中实时更新控件的位置,实现控件随着曲线轨迹移动:
@Override
public void onAnimationUpdate(ValueAnimator animation) {
// 不断获取曲线上的点,更新控件坐标,实现控件随着曲线移动
final PointF p = (PointF) animation.getAnimatedValue();
ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) getLayoutParams();
params.leftMargin = (int) p.x;
params.topMargin = (int) p.y;
setLayoutParams(params);
}
最后在曲线动画结束的时候缩小动画,缩小动画结束移除控件,与放大动画一样比较简单
/**
* 缩小动画
*/
private void shrink() {
AnimatorSet set = new AnimatorSet();
ObjectAnimator scaleXAnim = scaleX(1.0f, 0.0f);
ObjectAnimator scaleYAnim = scaleY(1.0f, 0.0f);
set.play(scaleXAnim).with(scaleYAnim);
set.start();
set.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
// 动画结束,移除控件
if(getParent() instanceof ViewGroup) {
ViewGroup parent = (ViewGroup) getParent();
parent.removeView(HeartView.this);
}
}
});
}
最后使用:
final ViewGroup content = (ViewGroup) findViewById(android.R.id.content);
final RelativeLayout layout = (RelativeLayout) content.getChildAt(0);
final Handler handler = new Handler();
handler.postDelayed(new Runnable() {
@Override
public void run() {
HeartView view = new HeartView(MainActivity.this);
layout.addView(view);
handler.postDelayed(this, 500);
}
}, 1000);
实现之前束手无策,实现之后感觉没啥可写的源码