现在市面上直播类的应用可以说是一抓一大把,随随便便就以什么主题来开发个直播应用,说白了就想在这领域分杯羹。在使用这些应用过程中其实不难发现,在所有的直播界面,少不了的就是各种打赏,各种点赞。今天自己就针对点赞功能敲了一下,代码不多,主要是涉及到动画运动轨迹运算,这里需借助贝塞尔曲线相关知识,我使用三阶贝塞尔曲线来实现轨迹动画。
运行效果
<强>一,具体实现流程
仔细分析整个点赞过程可以发现,首先是爱“心”的出现动画,然后是“爱心”以类似气泡的形式向上运动。
私人AnimatorSet generateEnterAnimation(查看目标){
ObjectAnimatorα=ObjectAnimator。ofFloat(目标,“阿尔法”,0.2 f, 1 f);
ObjectAnimator scaleX=ObjectAnimator。ofFloat(目标,“scaleX”, 0.5 f, 1 f);
ObjectAnimator写入scaleY=ObjectAnimator。ofFloat(目标,“写入scaleY”, 0.5 f, 1 f);
AnimatorSet enterAnimation=new AnimatorSet ();
enterAnimation。playTogether(αscaleX,写入scaleY);
enterAnimation.setDuration (150);
enterAnimation.setTarget(目标);
返回enterAnimation;
}
之前
这里使用了属性动画来改变“爱”心图片控件在屏幕上的状态,具体使用了控件透明度α,控件的缩放程度量表等属性动画。
私人ValueAnimator generateCurveAnimation(查看目标){
CurveEvaluator评估者=new CurveEvaluator (generateCTRLPointF (1) generateCTRLPointF (2));
ValueAnimator ValueAnimator=ValueAnimator.ofObject(评估者,
新PointF ((mViewWidth - mPicWidth)/2, mViewHeight - mChildViewHeight mPicHeight),
新PointF ((mViewWidth)/2 + (mRandom.nextBoolean () & # 63;1:1)* mRandom.nextInt (100), 0));
valueAnimator.setDuration (3000);
valueAnimator。addUpdateListener(新CurveUpdateLister(目标));
valueAnimator.setTarget(目标);
返回valueAnimator;
}
这里我们需要自定义一个估值算法CurveEveluator,因为“爱”心在上浮的过程中并不是以某一直线运动的,而是通过一条不规则的曲线往上浮,而我们知道TypeEveluator的作用就是根据动画的变化率来设置控件属性的当前值,具体算法实现就是使用三阶贝塞尔曲线公式:
其中P0是动画的起点,P3是动画的终点,而另外两点P1, P2是则作为三阶贝塞尔曲线的控制点。具体P1, P2要去什么值,这个凭经验,感觉差不多就行哈^ _ ^
私人类CurveEvaluator实现TypeEvaluator{//由于这里使用的是三阶的贝塞儿曲线,所以我们要定义两个控制点
私人PointF ctrlPointF1;
私人PointF ctrlPointF2;
公共CurveEvaluator (PointF ctrlPointF1, PointF ctrlPointF2) {
这一点。ctrlPointF1=ctrlPointF1;
这一点。ctrlPointF2=ctrlPointF2;
}
@Override
公共PointF评价(分数,浮动PointF startValue, PointF endValue) {//这里运用了三阶贝塞儿曲线的公式,参照上面公式
浮动leftTime=1.0 f -分数;
PointF resultPointF=new PointF ();//三阶贝塞儿曲线
resultPointF。x=(浮动)数学。战俘(leftTime, 3) * startValue.x
+ 3 *(浮动)数学。战俘(leftTime, 2) *分数* ctrlPointF1.x
+ 3 * leftTime *(浮动)数学。战俘(分数,2)* ctrlPointF2.x
+(浮动)数学。战俘(分数,3)* endValue.x;
resultPointF。y=(浮动)数学。战俘(leftTime, 3) * startValue.y
+ 3 *(浮动)数学。战俘(leftTime, 2) *分数* ctrlPointF1.y
+ 3 * leftTime * *分数* ctrlPointF2.y
+(浮动)数学。战俘(分数,3)* endValue.y;//二阶贝塞儿曲线,具体公式请上网查阅//resultPointF。x=(浮动)数学。战俘(leftTime, 2) * startValue。x + 2 * * leftTime * ctrlPointF1.x一部分//+((浮点)数学。战俘(分数,2))* endValue.x;//resultPointF。y=(浮动)数学。战俘(leftTime, 2) * startValue。y + 2 * * leftTime * ctrlPointF1.y一部分//+((浮点)数学。战俘(分数,2))* endValue.y;
返回resultPointF;
}
}
<强>二、使用操作
& lt; com.anenn.flowlikeviewlib.FlowLikeView
android: id=癅 + id/flowLikeView”
android: layout_width=" 75 dp”
android: layout_height=?00 dp”比;
& lt; TextView
android: layout_width=" wrap_content "
android: layout_height=" wrap_content "
android: layout_alignParentBottom=" true "
android: layout_centerHorizontal=" true "
android:背景=" @android:颜色/透明”
android: includeFontPadding=" false "
android: onClick=" addLikeView "
android:文本=跋不丁?
android:输入textColor=" # 0099 cc”
android: textSize=" 18 sp "
android: textStyle=按蟮ā?比;
& lt;/com.anenn.flowlikeviewlib.FlowLikeView>
