在Android中使用MorphView实现反向AnimatedVectorDrawables

MorphView是用于反向AnimatedVectorDrawables的便捷库。 AnimatedVectorDrawables类是API 21中引入的，用于轻松漂亮地对Vector Drawables进行动画处理。以下是AnimatedVectorDrawable可以执行的一些操作：

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

方法

• 步骤1：将支持库添加到build.gradle文件中，并在“依赖关系”部分中添加依赖关系。

  implementation 'com.akaita.android:morphview:1.0.0'      
  

• 步骤2：现在在drawable文件夹中创建avd_fav.xml文件，并添加以下代码。将其添加到activity_main.xml文件中的MorphView的avdFirst中。这将充当View的主要图像。从此链接下载矢量文件。

  avd_fav.xml

  
  
      
              
              android:viewportWidth="24"
                  
              android:viewportHeight="24">
              
                  
                      android:pathData="M2.01 21L23 12 2.01
                              3 2 10l15 2-15 2z"
                      
                      android:fillColor="#0055FF"
                      android:strokeWidth="1"/>
              
          
      
      
          
              
                  
                      android:duration="300"
                      android:interpolator="@android:interpolator/fast_out_slow_in"
                      android:propertyName="pathData"
                      
                      android:valueFrom="M 3.5 1.5 C 4.5 3.833 5.5
                             6.167 6.5 8.5 C 7.03 9.736 7.559 10.972
                             8.089 12.207 L 9.5 15.5 L 12.5 22.5 L
                             15.397 15.74 C 15.931 14.494 16.466
                             13.247 17 12 C 17.502 10.83 18.003 9.659
                             18.505 8.489 C 19.503 6.159 20.502 3.83
                             21.5 1.5 C 19.167 1.5 16.833 1.5 14.5 1.5
                             C 13.833 6.5 13.167 11.5 12.5 16.5 C
                             11.833 11.5 11.167 6.5 10.5 1.5 C 8.167
                             1.5 5.833 1.5 3.5 1.5 C 3.5 1.5 3.5
                             1.5 3.5 1.5"
                      
                      android:valueTo="M 2 8.5 C 2 11.131 3.647 13.423
                              6.385 16.147 C 7.581 17.338 8.984
                              18.61 10.55 20.03 L 12 21.35 L 12
                              21.35 L 13.45 20.04 C 15.129 18.514
                              16.622 17.159 17.872 15.893 C 20.455
                              13.277 22 11.048 22 8.5 C 22 5.42 19.58
                              3 16.5 3 C 15.63 3 14.777 3.203 14.006
                              3.565 C 13.235 3.928 12.545 4.45 12
                              5.09 C 11.584 4.601 11.083 4.181
                              10.525 3.848 C 9.624 3.309 8.575
                              3 7.5 3 C 4.42 3 2 5.42 2 8.5"
                      android:valueType="pathType" />
                  
                      android:interpolator="@android:interpolator/fast_out_slow_in"
                      android:propertyName="fillColor"
                      
                      android:valueFrom="#0055FF"
                      
                      android:valueTo="#24B31A"
                      android:valueType="colorType" />
              
          
      
      
          
              
                  
                  
                      android:interpolator="@android:interpolator/fast_out_slow_in"
                      android:propertyName="pivotX"
                      android:valueFrom="12"
                      android:valueTo="12"
                      android:valueType="floatType" />
                  
                      android:interpolator="@android:interpolator/fast_out_slow_in"
                      android:propertyName="pivotY"
                      android:valueFrom="12"
                      android:valueTo="12"
                      android:valueType="floatType" />
                  
                      android:interpolator="@android:interpolator/fast_out_slow_in"
                      android:propertyName="rotation"
                      android:valueFrom="-90"
                      android:valueTo="0"
                      android:valueType="floatType" />
              
          
      
  

• 步骤3：现在在drawable文件夹中创建avd_send.xml文件，并添加以下代码。将其添加到activity_main.xml文件中的MorphView的avdSecond中。这将充当View的辅助图像。从此链接下载矢量文件。

  avd_send.xml

  
  
      
               
              android:viewportWidth="24"
                   
              android:viewportHeight="24">
              
                  
                      android:pathData="M 12 21.35 L 10.55 20.03 C 5.4
                                        15.36 2 12.28 2 8.5 C 2 5.42
                                        4.42 3 7.5 3 C 9.24 3 10.91
                                        3.81 12 5.09 C 13.09 3.81
                                        14.76 3 16.5 3 C 19.58 3 22
                                        5.42 22 8.5 C 22 12.28 18.6
                                        15.36 13.45 20.04 L 12
                                        21.35 Z"
                      
                      android:fillColor="#24B31A"
                      android:strokeWidth="1"/>
              
          
      
      
          
              
                             
                      android:duration="300"
                      
                      android:valueFrom="M 2 8.5 C 2 11.131 3.647 13.423
                              6.385 16.147 C 7.581 17.338 8.984
                              18.61 10.55 20.03 L 12 21.35 L 12
                              21.35 L 13.45 20.04 C 15.129 18.514
                              16.622 17.159 17.872 15.893 C 20.455
                              13.277 22 11.048 22 8.5 C 22 5.42 19.58
                              3 16.5 3 C 15.63 3 14.777 3.203 14.006
                              3.565 C 13.235 3.928 12.545 4.45 12 5.09
                              C 11.584 4.601 11.083 4.181 10.525 3.848
                              C 9.624 3.309 8.575
                              3 7.5 3 C 4.42 3 2 5.42 2 8.5"
                      
                      android:valueTo="M 3.5 1.5 C 4.5 3.833 5.5 6.167
                              6.5 8.5 C 7.03 9.736 7.559 10.972
                              8.089 12.207 L 9.5 15.5 L 12.5 22.5
                              L 15.397 15.74 C 15.931 14.494 16.466
                              13.247 17 12 C 17.502 10.83 18.003
                              9.659 18.505 8.489 C 19.503 6.159
                              20.502 3.83 21.5 1.5 C 19.167 1.5 16.833
                              1.5 14.5 1.5 C 13.833 6.5 13.167 11.5 12.5
                              16.5 C 11.833 11.5 11.167 6.5 10.5 1.5 C
                              8.167 1.5 5.833 1.5 3.5 1.5 C 3.5 1.5 3.5
                              1.5 3.5 1.5"
                      android:valueType="pathType"
                      android:interpolator="@android:interpolator/fast_out_slow_in"/>
                  
              
          
      
      
          
              
                        
                  
                      android:interpolator="@android:interpolator/fast_out_slow_in"/>
                  
                      android:interpolator="@android:interpolator/fast_out_slow_in"/>
                  
                      android:interpolator="@android:interpolator/fast_out_slow_in"/>
              
          
      
  
  

• 步骤4：在activity_main.xml文件中添加以下代码。在这个文件中添加MorphView到布局，也可以添加在avdFirst的avd_fav.xml文件，并在avdSecond在MorphView avd_send.xml文件。
• 步骤5：在MainActivity.kt文件中添加以下代码。在此文件中，将setOnClickListener()添加到按钮，以便每当用户点击更改按钮时，它将更改AnimatedVectorDrawable 。

  MainActivity.kt

  package org.geeksforgeeks.morphView          
    
  import androidx.appcompat.app.AppCompatActivity
  import android.os.Bundle
  import android.view.View
  import kotlinx.android.synthetic.main.activity_main.*
    
  class MainActivity : AppCompatActivity() {
      override fun onCreate(savedInstanceState: Bundle?) {
          super.onCreate(savedInstanceState)
          setContentView(R.layout.activity_main)
    
         // whenever user clicks on change button this function
         // will get invoked automaically.
         button.setOnClickListener(View.OnClickListener {
             // It will change the avdFirst into 
             // avdSecond file and vice versa.
             morphView.morph()
         })
    
      }
  }
  

  输出：在模拟器上运行

  想要一个节奏更快，更具竞争性的环境来学习Android的基础知识吗?
  单击此处前往由我们的专家精心策划的指南，以使您立即做好行业准备！