系列文章目录
Android SVG动画详细例子
老规矩，效果实现有源码
文章目录
前言
在之前发了一篇关于SVG动画的文章，有小伙伴反应了一些问题，所以出一篇较为详细的动画例子文章，希望有所帮助。
一、看一下实现效果
二、之前例子链接，以及问题。
文章链接：Android利用SVG实现动画效果
具体准备工作，请看链接
小提：在写动画文件时， android:propertyName=“trimPathStart” 词别写错了，End也是，如果写成小写会爆异常。
三、效果的实现
1.SVG图来源：阿里图库
2.svg转换为VectorDrawable工具：http://inloop.github.io/svg2android/
也可用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();
}
}
}