This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.
Series of articles
Android SVG animation detail example
Old rules, the effect of source code
preface
I posted an article about SVG animation before, and some friends responded some problems, so I wrote a detailed article about animation examples, hoping to be helpful.
First, take a look at the implementation effect
2. Links to previous examples and questions.
Android uses SVG for animation
For specific preparations, please see the link
Android :propertyName= trimPathStart android:propertyName= trimPathStart
Realization of the effect
1.SVG diagram source: Ali Gallery
2. SVG to VectorDrawableInloop. Making. IO/svg2android…
It’s also available on Android.
3. Transformed code
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="73.51 dp"
android:height="73.51 dp"
android:viewportWidth="73.51"
android:viewportHeight="73.51">
<path
android:fillColor="#fcd765"
android:pathData="M35.67, 33.93 s - 8.5-6.22-4.85-17.76 S34.13, 28.61, 35.67, 33.93 Z" />
<path
android:fillColor="#fcd765"
android:pathData="M35, S19 33.93, 31.48, 19.9, 17.83, 29.68, 32.9, 35,33.93 Z" />
<path
android:fillColor="#fcd765"
android:pathData="M31.48, 34 s16. 28,43.59, 11,26.54, 26.36, 36.91, 31.48, 34 z" />
<path
android:fillColor="#fcd765"
android:pathData="M38.73 s8.5 33.1-6.22, 4.84 17.77 S40.27, 27.78, 38.73, 33.1 Z" />
<path
android:fillColor="#fcd765"
android:pathData="M30, 34 s4-12.79-0.61-18.48 C33.46, 8.75, 36.57, 26.94, 37, 34 Z" />
<path
android:fillColor="#fcd765"
android:pathData="M39.43, s16 33.1-2.45, 15.07 16.1 S44.71, 32.07, 39.43, 33.1 Z" />
<path
android:fillColor="#fcd765"
android:pathData="M42.92, s15.2 33.19, 9.56, 20.43-7.48 S48, 36.08, 42.92, 33.19 Z" />
<path
android:strokeColor="# 000"
android:strokeWidth="1"
android:strokeMiterLimit="10"
android:pathData="M38.1, S35.78 36.69, 53.26, 45.36, 62.3," />
</vector>
Copy the codeAdd attributes to each path that are bound to the animation: android:name=”leaf1″
The complete code is as follows (hua.xml) :
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="73.51 dp"
android:height="73.51 dp"
android:viewportWidth="73.51"
android:viewportHeight="73.51">
<path
android:name="leaf1"
android:fillColor="#fcd765"
android:pathData="M35.67, 33.93 s - 8.5-6.22-4.85-17.76 S34.13, 28.61, 35.67, 33.93 Z" />
<path
android:name="leaf2"
android:fillColor="#fcd765"
android:pathData="M35, S19 33.93, 31.48, 19.9, 17.83, 29.68, 32.9, 35,33.93 Z" />
<path
android:name="leaf3"
android:fillColor="#fcd765"
android:pathData="M31.48, 34 s16. 28,43.59, 11,26.54, 26.36, 36.91, 31.48, 34 z" />
<path
android:name="leaf4"
android:fillColor="#fcd765"
android:pathData="M38.73 s8.5 33.1-6.22, 4.84 17.77 S40.27, 27.78, 38.73, 33.1 Z" />
<path
android:name="leaf5"
android:fillColor="#fcd765"
android:pathData="M30, 34 s4-12.79-0.61-18.48 C33.46, 8.75, 36.57, 26.94, 37, 34 Z" />
<path
android:name="leaf6"
android:fillColor="#fcd765"
android:pathData="M39.43, s16 33.1-2.45, 15.07 16.1 S44.71, 32.07, 39.43, 33.1 Z" />
<path
android:name="leaf7"
android:fillColor="#fcd765"
android:pathData="M42.92, s15.2 33.19, 9.56, 20.43-7.48 S48, 36.08, 42.92, 33.19 Z" />
<path
android:name="root"
android:strokeColor="# 000"
android:strokeWidth="1"
android:strokeMiterLimit="10"
android:pathData="M38.1, S35.78 36.69, 53.26, 45.36, 62.3," />
</vector>
Copy the code4. Animation files (svg_pathanim)
This case with an animation file, can also be multiple.
<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>
Copy the code5. Create a new file under drawable to associate SVG with animation (hua_im.xml).
<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>
Copy the code6. Reference the file in step 5 in ImageView
<ImageView
android:id="@+id/iv"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerInParent="true"
app:srcCompat="@drawable/hua_anim" />
Copy the code7. Start the animation in the 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; }}/** * Start animation **@param iv
*/
private void startAnim(ImageView iv) {
drawable = iv.getDrawable();
if (drawable instanceofAnimatable) { ((Animatable) drawable).start(); }}}Copy the codePlease feel free to discuss in the comments section. The nuggets will draw 100 nuggets in the comments section after the diggnation project. See the event article for details