前言
在之前发了一篇关于直播商城app源码SVG动画的文章，有小伙伴反应了一些问题，所以出一篇较为详细的动画例子文章，希望有所帮助。
一、效果的实现
1.SVG图来源：阿里图库
2.svg转换为VectorDrawable工具
也可用Android自带。
3.转化后的代码
<?xml version="1.0" encoding="utf-8"?> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="73.51dp" android:height="73.51dp" android:viewportWidth="73.51" android:viewportHeight="73.51"> <path android:fillColor="#fcd765" android:pathData="M35.67,33.93s-8.5-6.22-4.85-17.76S34.13,28.61,35.67,33.93Z" /> <path android:fillColor="#fcd765" android:pathData="M35,33.93S19,31.48,19.9,17.83,29.68,32.9,35,33.93Z" /> <path android:fillColor="#fcd765" android:pathData="M31.48,34S16.28,43.59,11,26.54,26.36,36.91,31.48,34Z" /> <path android:fillColor="#fcd765" android:pathData="M38.73,33.1s8.5-6.22,4.84-17.77S40.27,27.78,38.73,33.1Z" /> <path android:fillColor="#fcd765" android:pathData="M37,34s4-12.79 0.61 -18.48C33.46,8.75,36.57,26.94,37,34Z" /> <path android:fillColor="#fcd765" android:pathData="M39.43,33.1s16-2.45,15.07-16.1S44.71,32.07,39.43,33.1Z" /> <path android:fillColor="#fcd765" android:pathData="M42.92,33.19s15.2,9.56,20.43-7.48S48,36.08,42.92,33.19Z" /> <path android:strokeColor="#000" android:strokeWidth="1" android:strokeMiterLimit="10" android:pathData="M38.1,36.69S35.78,53.26,45.36,62.3" /> </vector>
给每个path加上与动画绑定的属性： 如：android:name="leaf1"
完整代码如下（hua.xml）：
<?xml version="1.0" encoding="utf-8"?> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="73.51dp" android:height="73.51dp" android:viewportWidth="73.51" android:viewportHeight="73.51"> <path android:name="leaf1" android:fillColor="#fcd765" android:pathData="M35.67,33.93s-8.5-6.22-4.85-17.76S34.13,28.61,35.67,33.93Z" /> <path android:name="leaf2" android:fillColor="#fcd765" android:pathData="M35,33.93S19,31.48,19.9,17.83,29.68,32.9,35,33.93Z" /> <path android:name="leaf3" android:fillColor="#fcd765" android:pathData="M31.48,34S16.28,43.59,11,26.54,26.36,36.91,31.48,34Z" /> <path android:name="leaf4" android:fillColor="#fcd765" android:pathData="M38.73,33.1s8.5-6.22,4.84-17.77S40.27,27.78,38.73,33.1Z" /> <path android:name="leaf5" android:fillColor="#fcd765" android:pathData="M37,34s4-12.79 0.61 -18.48C33.46,8.75,36.57,26.94,37,34Z" /> <path android:name="leaf6" android:fillColor="#fcd765" android:pathData="M39.43,33.1s16-2.45,15.07-16.1S44.71,32.07,39.43,33.1Z" /> <path android:name="leaf7" android:fillColor="#fcd765" android:pathData="M42.92,33.19s15.2,9.56,20.43-7.48S48,36.08,42.92,33.19Z" /> <path android:name="root" android:strokeColor="#000" android:strokeWidth="1" android:strokeMiterLimit="10" android:pathData="M38.1,36.69S35.78,53.26,45.36,62.3" /> </vector>
4.动画文件 （svg_pathanim）
本案例用的一个动画文件，也可用多个。
<?xml version="1.0" encoding="utf-8"?> <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:duration="4000" android:propertyName="trimPathStart" android:repeatCount="infinite" android:repeatMode="reverse" android:valueFrom="1" android:valueTo="0" android:valueType="floatType"> </objectAnimator>
5.在drawable文件夹下新建文件将svg与动画进行关联(hua_anim.xml)
<?xml version="1.0" encoding="utf-8"?> <animated-vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:drawable="@drawable/hua"> <target android:animation="@animator/svg_pathanim" android:name="leaf1"></target> <target android:animation="@animator/svg_pathanim" android:name="leaf2"></target> <target android:animation="@animator/svg_pathanim" android:name="leaf3"></target> <target android:animation="@animator/svg_pathanim" android:name="leaf4"></target> <target android:animation="@animator/svg_pathanim" android:name="leaf5"></target> <target android:animation="@animator/svg_pathanim" android:name="leaf6"></target> <target android:animation="@animator/svg_pathanim" android:name="leaf7"></target> <target android:animation="@animator/svg_pathanim" android:name="root"></target> </animated-vector>
6.在ImageView中引用第5步的文件
<ImageView android:id="@+id/iv" android:layout_width="100dp" android:layout_height="100dp" android:layout_centerInParent="true" app:srcCompat="@drawable/hua_anim" />
7.在Activity中启动动画
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private ImageView anim_path;
private Drawable drawable;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
anim_path = (ImageView) findViewById(R.id.iv);
anim_path.setOnClickListener(this);
}
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.iv:
startAnim(anim_path);
break;
}
}
/**
* 启动动画
*
* @param iv
*/
private void startAnim(ImageView iv) {
drawable = iv.getDrawable();
if (drawable instanceof Animatable) {
((Animatable) drawable).start();
}
}
}
欢迎在评论区讨论关于直播商城app源码实现SVG动画的内容。
声明：本文由云豹科技转发自计蒙不吃鱼博客，如有侵权请联系作者删除
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/69982461/viewspace-2837597/ ，如需转载，请注明出处，否则将追究法律责任。
上一篇：
实现app直播商城源码的系统底部导航栏
下一篇：
直播类app开发，实现系统的加载动画
请登录后发表评论
登录
全部评论
