📜  如何在Android中制作Heart Fill动画

📅  最后修改于: 2021-05-13 14:41:01             🧑  作者: Mango

AnimatedVectorDrawable类是在API 21中引入的,用于轻松漂亮地对Vector Drawables进行动画处理。使用AnimatedVectorDrawable,可以执行以下操作:

  • 旋转,缩放,平移VectorDrawables
  • 对VectorDrawable进行动画处理,例如填充颜色等。
  • 绘制路径并进行路径变形

AnimatedVectorDrawable元素具有VectorDrawable属性,以及一个或多个目标元素。 target元素可以通过android:name属性指定其目标,并通过android:animation属性将该目标与适当的ObjectAnimator或AnimatorSet链接。

绘制“心形填充”动画的方法:

  1. values目录中创建一个新的heart.xml文件,并添加以下矢量drawble路径数据和路径命令:
    heart.xml
    
    
        
        
            M32.95, 19 C31.036, 19 29.199, 19.8828338 28,
            21.2724796 C26.801, 19.8828338 24.964, 
            19 23.05, 19 C19.6565, 19 17, 21.6321526 17,
            24.9945504 C17, 29.1089918 20.74, 32.4713896 
            26.405, 37.5667575 L28, 39 L29.595, 37.5667575 C35.26,
            32.4713896 39, 29.1089918 39, 24.9945504 C39,
            21.6321526 36.3435, 19 32.95, 19 L32.95, 
            19 Z M28.1155, 35.9536785 L28, 36.0572207 L27.8845,
            35.9536785 C22.654, 31.2506812 19.2,
            28.1444142 19.2, 24.9945504 C19.2, 22.8201635 20.8555,
            21.1798365 23.05, 21.1798365 C24.744, 
            21.1798365 26.394, 22.2643052 26.9715, 23.7520436 
            L29.023, 23.7520436 C29.606, 22.2643052 31.256,
            21.1798365 32.95, 21.1798365 C35.1445, 
            21.1798365 36.8, 22.8201635 36.8,
            24.9945504 C36.8, 28.1444142 33.346,
            31.2506812 28.1155, 35.9536785 L28.1155,
            35.9536785 Z
        
      
        
            M28, 39 L26.405, 37.5667575 C20.74,
            32.4713896 17, 29.1089918 17, 
            24.9945504 C17, 21.6321526 19.6565,
            19 23.05, 19 C24.964, 19 26.801, 19.8828338 28,
            21.2724796 C29.199, 19.8828338 31.036, 19 32.95,
            19 C36.3435, 19 39, 21.6321526 39, 24.9945504 C39,
            29.1089918 35.26, 32.4713896 29.595,
            37.5667575 L28, 39 L28, 39 Z
        
      
        
            M18 37 L38 37 L38 37 L18 37 Z
        
      
        
            M0 0 L56 0 L56 56 L0 56 Z
        
    


    empty_heart.xml
    
    


    fill_heart.xml
    
    


    avd_heart_empty.xml
    
    
      
        
    


    avd_heart_fill.xml
    
    
      
        
      
    


    ic_heart.xml
    
    
      
        
      
        
      
        
      
    


    MainActivity.java
    package org.geeksforgeeks.fillheart;
      
    import android.app.Activity;
    import android.graphics.drawable.AnimatedVectorDrawable;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.ImageView;
      
    public class MainActivity extends Activity {
      
        private ImageView imageView;
        private AnimatedVectorDrawable emptyHeart;
        private AnimatedVectorDrawable fillHeart;
        private boolean full = false;
      
        @Override
        protected void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            imageView = findViewById(R.id.image_view);
            emptyHeart
                = (AnimatedVectorDrawable)
                    getDrawable(
                        R.drawable.avd_heart_empty);
            fillHeart
                = (AnimatedVectorDrawable)
                    getDrawable(
                        R.drawable.avd_heart_fill);
        }
      
        // This method help to animate our view.
        public void animate(View view)
        {
            AnimatedVectorDrawable drawable
                = full
                      ? emptyHeart
                      : fillHeart;
            imageView.setImageDrawable(drawable);
            drawable.start();
            full = !full;
        }
    }


  2. 现在创建一个新的Android资源目录。右键单击res文件夹,然后选择“ Android资源目录”。确保选择资源类型作为动画制作器

    动画师可以更改对象的物理属性。这意味着,如果将视图移动到新位置,则触摸坐标将被映射到新位置,而无需任何其他干预。

  3. 现在,在动画师目录中创建一个新的empty_heart.xml文件。在此文件中,我们主要将为时和动画类型定义为empty_heart.xml。当用户单击填充的心脏图标时,此文件负责动画。

    empty_heart.xml

    
    
    
  4. 现在,在动画师目录中创建一个新的fill_heart.xml文件。在此文件中,我们主要为empty_heart.xml定义持续时间和动画类型。当用户单击空的心脏图标时,此文件负责动画。

    fill_heart.xml

    
    
    

    在接下来的两个步骤中,我们将为空心和填充心创建AnimatedVectorDrawable。

  5. 现在,在drawable目录和以下代码中创建一个新的avd_heart_empty.xml文件

    avd_heart_empty.xml

    
    
      
        
    
    
  6. 现在,在drawable目录和以下代码中创建一个新的avd_heart_fill.xml文件

    avd_heart_fill.xml

    
    
      
        
      
    
    
  7. 在此步骤中,我们将为矢量图形定义一个静态可绘制对象。现在,在drawable目录和以下代码中创建一个新的ic_heart.xml文件

    ic_heart.xml

    
    
      
        
      
        
      
        
      
    
    
  8. 现在,在MainActivity中添加以下代码。 Java文件。

    主要活动。Java

    package org.geeksforgeeks.fillheart;
      
    import android.app.Activity;
    import android.graphics.drawable.AnimatedVectorDrawable;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.ImageView;
      
    public class MainActivity extends Activity {
      
        private ImageView imageView;
        private AnimatedVectorDrawable emptyHeart;
        private AnimatedVectorDrawable fillHeart;
        private boolean full = false;
      
        @Override
        protected void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            imageView = findViewById(R.id.image_view);
            emptyHeart
                = (AnimatedVectorDrawable)
                    getDrawable(
                        R.drawable.avd_heart_empty);
            fillHeart
                = (AnimatedVectorDrawable)
                    getDrawable(
                        R.drawable.avd_heart_fill);
        }
      
        // This method help to animate our view.
        public void animate(View view)
        {
            AnimatedVectorDrawable drawable
                = full
                      ? emptyHeart
                      : fillHeart;
            imageView.setImageDrawable(drawable);
            drawable.start();
            full = !full;
        }
    }
    
  9. 现在编译并运行Android应用程序。

输出:

参考:

  • AnimatedVectorDrawable
  • 矢量可绘制