我特別喜歡看明星的直播灼捂，什么演技精湛吳亦凡离例，百花影帝李易峰，鐵血硬漢黃子韜悉稠，男人本色是鹿晗宫蛆，從不吸毒柯震東，一米八零黃曉明的猛，從未整容是楊穎耀盗，闔家歡樂王寶強(qiáng)。啊衰絮，這些明星我特別喜歡袍冷，老喜歡他們的直播了。今天猫牡，仿照美拍直播刷禮物做了同樣的效果胡诗。
不太明白貝塞爾曲線的，可以看我另一篇貝塞爾曲線基礎(chǔ)篇
這里是美拍效果：
giphy的副本.gif
自制效果：(背景仍為截圖)
giphy.gif
實(shí)現(xiàn)思路：
1.寫一個自定義Relativelayout淌友，每次點(diǎn)擊煌恢，就在底部添加一個imageview。
2.隨機(jī)顯示一種禮物圖標(biāo)震庭。
3.先讓imageview做放大動畫出現(xiàn)瑰抵，再繪制貝塞爾曲線。
4.計算曲線路徑器联，根據(jù)曲線實(shí)時設(shè)置imageview坐標(biāo)二汛。
準(zhǔn)備工作，知道TypeEvaluator：
這個類是動畫能實(shí)現(xiàn)的基礎(chǔ)拨拓，在獲取動畫對象時只需要傳入起始和結(jié)束值系統(tǒng)就會自動完成值的平滑過渡肴颊。因為根據(jù)動畫的類型，內(nèi)部的evaluate()方法根據(jù)規(guī)則計算路徑上的點(diǎn)坐標(biāo)渣磷，并返回這個Point婿着。當(dāng)然也可以繼承TypeEvaluator自定義計算規(guī)則。
使用方法：
ValueAnimator animator = ValueAnimator.ofObject(evaluator, new PointF(), new PointF());
設(shè)置動畫監(jiān)聽醋界，在onAnimationUpdate()回調(diào)中PointF pointF = (PointF) animation.getAnimatedValue()或去當(dāng)前路徑上的點(diǎn)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);
}
實(shí)現(xiàn)步驟：
1.創(chuàng)建數(shù)組，添加5個禮物drawable圖標(biāo)形纺。設(shè)置布局參數(shù)為底部居中丘侠。
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);
//代碼設(shè)置布局方式，底部居中
layoutParams.addRule(CENTER_HORIZONTAL,TRUE);
layoutParams.addRule(ALIGN_PARENT_BOTTOM,TRUE);
}
2.點(diǎn)擊添加imageview挡篓，同時啟動放大出現(xiàn)動畫和貝塞爾漂流記動畫婉陷。
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.給動畫設(shè)置自定義BezierEvaluator類帚称，設(shè)置底部居中為貝塞爾起點(diǎn)，結(jié)束點(diǎn)隨機(jī)在寬度以內(nèi)秽澳，高度50以內(nèi)闯睹。
private ValueAnimator getBezierValueAnimator(View target) {
//初始化一個貝塞爾計算器- - 傳入
BezierEvaluator evaluator = new BezierEvaluator(getPointF(),getPointF());
//這里最好畫個圖 理解一下 傳入了起點(diǎn) 和 終點(diǎn)
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;
}
每次產(chǎn)生隨機(jī)控制點(diǎn)
private PointF getPointF() {
PointF pointF = new PointF();
pointF.x = (float) (Math.random()*screenWidth);
pointF.y = (float) (Math.random()*screenHeight/4);
return pointF;
}
5.自定義BezierEvaluator路徑計算類，構(gòu)造方法傳入2個點(diǎn)担神，即設(shè)置為三階貝塞爾曲線的2個控制點(diǎn)楼吃。依照三階貝塞爾曲線計算公式：
三階公式
再結(jié)合startPoint和endPoint計算當(dāng)前路徑上點(diǎn)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();//結(jié)果
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.屬性動畫監(jiān)聽妄讯，拿到該路徑點(diǎn)給imageview設(shè)置坐標(biāo)孩锡；并設(shè)置逐漸透明的動畫。
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);
//代碼設(shè)置布局方式躬窜，底部居中
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());
//這里最好畫個圖 理解一下 傳入了起點(diǎn) 和 終點(diǎn)
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;
}
/**
* 產(chǎn)生隨機(jī)控制點(diǎn)
* @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();//結(jié)果
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;
}
}
}
大家定當(dāng)好好努力工作，三省吾身炕置，不要荒廢青春荣挨，不然，15年后拿什么娶她朴摊？
giphy.gif
