需要图片集和源码请点赞关注收藏后评论区留言~~~
贝塞尔曲线在App中还有一个常见应用,就像时兴的给主播打赏礼物,点击爱心打赏之后,图标会在屏幕上走出一条优雅的飘逸曲线,这个飘逸曲线在前进途中左右摇摆。具体到编码上,可将漂移动画的实现步骤分为以下几步
1:创建一个缩放动画 让礼物图标在爱心处从小变到大,呈现出礼物孵化效果
2:创建一个属性动画 指定礼物飘逸的起点和终点,并在动画过程中动态改变贝塞尔曲线的控制点
3:定义一个添加打赏的方法 该方法先把礼物图标添加到视图上 再依次播放前两步的缩放动画和属性动画
然后在布局文件中添加RewardView节点,并在对应的活动页面给爱心图标添加点击事件,每次点击爱心都调addGiftView方法添加打赏礼物,这样多次点击便会涌现多个礼物,同时每个礼物图标都沿着自己的曲线蜿蜒前行,从而实现打赏飘逸的动画特效
演示视频如下
给主播刷礼物
点击后礼物会摇摆上升
代码如下
Java类
package com.example.ebook; import android.os.Bundle; import androidx.appcompat.app.AppCompatActivity; import com.example.ebook.widget.RewardView; public class BezierGiftActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_bezier_gift); RewardView rv_gift = findViewById(R.id.rv_gift); // 每次点击爱心图标,都往打赏视图上面添加礼物的漂移动画 findViewById(R.id.iv_reward).setOnClickListener(v -> rv_gift.addGiftView()); } }
XML文件
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="请点击右边的红心图标" android:textColor="@color/black" android:textSize="17sp" /> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" android:gravity="right" android:layout_alignParentRight="true" android:layout_marginBottom="40dp"> <com.example.ebook.widget.RewardView android:id="@+id/rv_gift" android:layout_width="100dp" android:layout_height="300dp" android:background="#fdfdfd"/> <ImageView android:id="@+id/iv_reward" android:layout_width="60dp" android:layout_height="60dp" android:layout_marginRight="20dp" android:src="@drawable/reward"/> </LinearLayout> </RelativeLayout>
创作不易 觉得有帮助请点赞关注收藏~~~