自定义view系列之——贝塞尔曲线仿美拍直播刷礼物
2017-11-29 本文已影响317人
奔跑吧李博
我特别喜欢看明星的直播，什么演技精湛吴亦凡，百花影帝李易峰，铁血硬汉黄子韬，男人本色是鹿晗，从不吸毒柯震东，一米八零黄晓明，从未整容是杨颖，阖家欢乐王宝强。啊，这些明星我特别喜欢，老喜欢他们的直播了。今天，仿照美拍直播刷礼物做了同样的效果。
不太明白贝塞尔曲线的，可以看我另一篇贝塞尔曲线基础篇
这里是美拍效果：
giphy的副本.gif
自制效果：(背景仍为截图)
giphy.gif
实现思路：
1.写一个自定义Relativelayout，每次点击，就在底部添加一个imageview。
2.随机显示一种礼物图标。
3.先让imageview做放大动画出现，再绘制贝塞尔曲线。
4.计算曲线路径，根据曲线实时设置imageview坐标。
准备工作，知道TypeEvaluator：
这个类是动画能实现的基础，在获取动画对象时只需要传入起始和结束值系统就会自动完成值的平滑过渡。因为根据动画的类型，内部的evaluate()方法根据规则计算路径上的点坐标，并返回这个Point。当然也可以继承TypeEvaluator自定义计算规则。
使用方法：
ValueAnimator animator = ValueAnimator.ofObject(evaluator, new PointF(), new PointF());
设置动画监听，在onAnimationUpdate()回调中PointF pointF = (PointF) animation.getAnimatedValue()或去当前路径上的点pointF。
TypeEvaluator接口：
public interface TypeEvaluator<T> {
/**
* This function returns the result of linearly interpolating the start and end values, with
* <code>fraction</code> representing the proportion between the start and end values. The
* calculation is a simple parametric calculation: <code>result = x0 + t * (x1 - x0)</code>,
* where <code>x0</code> is <code>startValue</code>, <code>x1</code> is <code>endValue</code>,
* and <code>t</code> is <code>fraction</code>.
*
* @param fraction The fraction from the starting to the ending values
* @param startValue The start value.
* @param endValue The end value.
* @return A linear interpolation between the start and end values, given the
* <code>fraction</code> parameter.
*/
public T evaluate(float fraction, T startValue, T endValue);
}
实现步骤：
1.创建数组，添加5个礼物drawable图标。设置布局参数为底部居中。
private void init() {
drawables[0] = ContextCompat.getDrawable(getContext(),R.mipmap.ic1);
drawables[1] = ContextCompat.getDrawable(getContext(),R.mipmap.ic2);
drawables[2] = ContextCompat.getDrawable(getContext(),R.mipmap.ic3);
drawables[3] = ContextCompat.getDrawable(getContext(),R.mipmap.ic4);
drawables[4] = ContextCompat.getDrawable(getContext(),R.mipmap.ic5);
layoutParams = new LayoutParams(100,100);
//代码设置布局方式，底部居中
layoutParams.addRule(CENTER_HORIZONTAL,TRUE);
layoutParams.addRule(ALIGN_PARENT_BOTTOM,TRUE);
}
2.点击添加imageview，同时启动放大出现动画和贝塞尔漂流记动画。
public void addImageView(){
ImageView imageView = new ImageView(getContext());
imageView.setImageDrawable(drawables[(int) (Math.random()*drawables.length)]);
imageView.setLayoutParams(layoutParams);
addView(imageView);
setAnim(imageView).start();
getBezierValueAnimator(imageView).start();
}
3.放大动画
private AnimatorSet setAnim(View view){
ObjectAnimator scaleX = ObjectAnimator.ofFloat(view, View.SCALE_X, 0.2f, 1f);
ObjectAnimator scaleY = ObjectAnimator.ofFloat(view, View.SCALE_Y, 0.2f, 1f);
AnimatorSet enter = new AnimatorSet();
enter.setDuration(500);
enter.setInterpolator(new LinearInterpolator());//线性变化
enter.playTogether(scaleX,scaleY);
enter.setTarget(view);
return enter;
}
4.给动画设置自定义BezierEvaluator类，设置底部居中为贝塞尔起点，结束点随机在宽度以内，高度50以内。
private ValueAnimator getBezierValueAnimator(View target) {
//初始化一个贝塞尔计算器- - 传入
BezierEvaluator evaluator = new BezierEvaluator(getPointF(),getPointF());
//这里最好画个图 理解一下 传入了起点 和 终点
PointF randomEndPoint = new PointF((float) (Math.random()*screenWidth), (float) (Math.random()*50));
ValueAnimator animator = ValueAnimator.ofObject(evaluator, new PointF(screenWidth / 2, screenHeight), randomEndPoint);
animator.addUpdateListener(new BezierListener(target));
animator.setTarget(target);
animator.setDuration(3000);
return animator;
}
每次产生随机控制点
private PointF getPointF() {
PointF pointF = new PointF();
pointF.x = (float) (Math.random()*screenWidth);
pointF.y = (float) (Math.random()*screenHeight/4);
return pointF;
}
5.自定义BezierEvaluator路径计算类，构造方法传入2个点，即设置为三阶贝塞尔曲线的2个控制点。依照三阶贝塞尔曲线计算公式：
三阶公式
再结合startPoint和endPoint计算当前路径上点point并return。
public class BezierEvaluator implements TypeEvaluator<PointF> {
private PointF pointF1;
private PointF pointF2;
public BezierEvaluator(PointF pointF1,PointF pointF2){
this.pointF1 = pointF1;
this.pointF2 = pointF2;
}
@Override
public PointF evaluate(float time, PointF startValue,
PointF endValue) {
float timeLeft = 1.0f - time;
PointF point = new PointF();//结果
point.x = timeLeft * timeLeft * timeLeft * (startValue.x)
+ 3 * timeLeft * timeLeft * time * (pointF1.x)
+ 3 * timeLeft * time * time * (pointF2.x)
+ time * time * time * (endValue.x);
point.y = timeLeft * timeLeft * timeLeft * (startValue.y)
+ 3 * timeLeft * timeLeft * time * (pointF1.y)
+ 3 * timeLeft * time * time * (pointF2.y)
+ time * time * time * (endValue.y);
return point;
}
}
6.属性动画监听，拿到该路径点给imageview设置坐标；并设置逐渐透明的动画。
private class BezierListener implements ValueAnimator.AnimatorUpdateListener {
private View target;
public BezierListener(View target) {
this.target = target;
}
@Override
public void onAnimationUpdate(ValueAnimator animation) {
//这里获取到贝塞尔曲线计算出来的的x y值 赋值给view 这样就能让爱心随着曲线走啦
PointF pointF = (PointF) animation.getAnimatedValue();
target.setX(pointF.x);
target.setY(pointF.y);
// 这里顺便做一个alpha动画
target.setAlpha(1 - animation.getAnimatedFraction());
}
}
<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:background="@mipmap/bg"
tools:context="com.example.berziergift.berziergift.MainActivity">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical"
android:gravity="right"
android:layout_alignParentRight="true"
android:layout_marginBottom="40dp">
<com.example.berziergift.berziergift.MyGiftView
android:id="@+id/giftview"
android:layout_width="100dp"
android:layout_height="300dp"/>
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:onClick="like"
android:layout_marginRight="5dp"
android:layout_below="@id/giftview"/>
</LinearLayout>
</RelativeLayout>
完整代码：
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.animation.TypeEvaluator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.PointF;
import android.graphics.drawable.Drawable;
import android.support.v4.content.ContextCompat;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.LinearInterpolator;
import android.widget.ImageView;
import android.widget.RelativeLayout;
/**
* Created by libo on 2017/11/28.
*/
public class MyGiftView extends RelativeLayout{
private int screenWidth;
private int screenHeight;
private LayoutParams layoutParams;
private Drawable[] drawables = new Drawable[5];
public MyGiftView(Context context) {
super(context);
init();
}
public MyGiftView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
drawables[0] = ContextCompat.getDrawable(getContext(),R.mipmap.ic1);
drawables[1] = ContextCompat.getDrawable(getContext(),R.mipmap.ic2);
drawables[2] = ContextCompat.getDrawable(getContext(),R.mipmap.ic3);
drawables[3] = ContextCompat.getDrawable(getContext(),R.mipmap.ic4);
drawables[4] = ContextCompat.getDrawable(getContext(),R.mipmap.ic5);
layoutParams = new LayoutParams(100,100);
//代码设置布局方式，底部居中
layoutParams.addRule(CENTER_HORIZONTAL,TRUE);
layoutParams.addRule(ALIGN_PARENT_BOTTOM,TRUE);
}
public void addImageView(){
ImageView imageView = new ImageView(getContext());
imageView.setImageDrawable(drawables[(int) (Math.random()*drawables.length)]);
imageView.setLayoutParams(layoutParams);
addView(imageView);
setAnim(imageView).start();
getBezierValueAnimator(imageView).start();
}
private ValueAnimator getBezierValueAnimator(View target) {
//初始化一个贝塞尔计算器- - 传入
BezierEvaluator evaluator = new BezierEvaluator(getPointF(),getPointF());
//这里最好画个图 理解一下 传入了起点 和 终点
PointF randomEndPoint = new PointF((float) (Math.random()*screenWidth), (float) (Math.random()*50));
ValueAnimator animator = ValueAnimator.ofObject(evaluator, new PointF(screenWidth / 2, screenHeight), randomEndPoint);
animator.addUpdateListener(new BezierListener(target));
animator.setTarget(target);
animator.setDuration(3000);
return animator;
}
/**
* 产生随机控制点
* @return
*/
private PointF getPointF() {
PointF pointF = new PointF();
pointF.x = (float) (Math.random()*screenWidth);
pointF.y = (float) (Math.random()*screenHeight/4);
return pointF;
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
screenWidth = getMeasuredWidth();
screenHeight = getMeasuredHeight();
}
private AnimatorSet setAnim(View view){
ObjectAnimator scaleX = ObjectAnimator.ofFloat(view, View.SCALE_X, 0.2f, 1f);
ObjectAnimator scaleY = ObjectAnimator.ofFloat(view, View.SCALE_Y, 0.2f, 1f);
AnimatorSet enter = new AnimatorSet();
enter.setDuration(500);
enter.setInterpolator(new LinearInterpolator());//线性变化
enter.playTogether(scaleX,scaleY);
enter.setTarget(view);
return enter;
}
private class BezierListener implements ValueAnimator.AnimatorUpdateListener {
private View target;
public BezierListener(View target) {
this.target = target;
}
@Override
public void onAnimationUpdate(ValueAnimator animation) {
//这里获取到贝塞尔曲线计算出来的的x y值 赋值给view 这样就能让爱心随着曲线走啦
PointF pointF = (PointF) animation.getAnimatedValue();
target.setX(pointF.x);
target.setY(pointF.y);
// 这里顺便做一个alpha动画
target.setAlpha(1 - animation.getAnimatedFraction());
}
}
public class BezierEvaluator implements TypeEvaluator<PointF> {
private PointF pointF1;
private PointF pointF2;
public BezierEvaluator(PointF pointF1,PointF pointF2){
this.pointF1 = pointF1;
this.pointF2 = pointF2;
}
@Override
public PointF evaluate(float time, PointF startValue,
PointF endValue) {
float timeLeft = 1.0f - time;
PointF point = new PointF();//结果
point.x = timeLeft * timeLeft * timeLeft * (startValue.x)
+ 3 * timeLeft * timeLeft * time * (pointF1.x)
+ 3 * timeLeft * time * time * (pointF2.x)
+ time * time * time * (endValue.x);
point.y = timeLeft * timeLeft * timeLeft * (startValue.y)
+ 3 * timeLeft * timeLeft * time * (pointF1.y)
+ 3 * timeLeft * time * time * (pointF2.y)
+ time * time * time * (endValue.y);
return point;
}
}
}
大家定当好好努力工作，三省吾身，不要荒废青春，不然，15年后拿什么娶她？
giphy.gif
