当前位置: 首页 > 编程笔记 >

Android SpringAnimation弹性动画解析

卢翔宇
2023-03-14
本文向大家介绍Android SpringAnimation弹性动画解析,包括了Android SpringAnimation弹性动画解析的使用技巧和注意事项,需要的朋友参考一下

也许你想在Android上实现这种反弹的动画效果。Android Support Library 25.3.0引入了Dynamic-animation增强动画,里面提供了几个类用于使动画呈现实现真实的物理效果。

你会想,自己的动画里加上 BounceInterpolator或OvershootInterpolator 插值器也能达到这种效果,然而实际上达不到。当然你也可以自己写插值器,如果你不嫌麻烦的话。

SpringAnimation弹性动画实现方法

gradle引入,最低支持API16

dependencies {
 compile 'com.android.support:support-dynamic-animation:25.3.0'
}

定义SpringForce,定义弹性特质

SpringForce spring = new SpringForce(finalPosition);
spring.setStiffness(stiffness);
spring.setDampingRatio(dampingRatio);

定义SpringAnimation,并关联SpringForce对象

SpringAnimation animation = new SpringAnimation(view, property);
animation.setSpring(spring);

代码如下

PositionActivity.java

public class PositionActivity extends AppCompatActivity {

 float STIFFNESS = SpringForce.STIFFNESS_MEDIUM;//硬度
 float DAMPING_RATIO = SpringForce.DAMPING_RATIO_HIGH_BOUNCY;//阻尼

 SpringAnimation xAnimation;//x方向
 SpringAnimation yAnimation;//y方向

 View movingView;//图片

 float dX = 0f;
 float dY = 0f;

 @Override
 public void onCreate(@Nullable Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_position);

  movingView = findViewById(R.id.movingView);

  // 以图片的初始位置创建动画对象
  movingView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
   @Override
   public void onGlobalLayout() {
    xAnimation = createSpringAnimation(
      movingView, SpringAnimation.X, movingView.getX(), STIFFNESS, DAMPING_RATIO);
    yAnimation = createSpringAnimation(
      movingView, SpringAnimation.Y, movingView.getY(), STIFFNESS, DAMPING_RATIO);
    //初始位置确定,移除监听
    movingView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
   }
  });

  movingView.setOnTouchListener(new View.OnTouchListener() {
   @Override
   public boolean onTouch(View view, MotionEvent event) {
    switch (event.getActionMasked()) {
     case MotionEvent.ACTION_DOWN:
      // 计算到左上角的距离
      dX = view.getX() - event.getRawX();
      dY = view.getY() - event.getRawY();

      // 取消动画以便按住图片
      xAnimation.cancel();
      yAnimation.cancel();
      break;
     case MotionEvent.ACTION_MOVE:
      // 另一种改变View的LayoutParams(位置)的方式
      movingView.animate()
        .x(event.getRawX() + dX)
        .y(event.getRawY() + dY)
        .setDuration(0)
        .start();
      break;
     case MotionEvent.ACTION_UP:
      xAnimation.start();
      yAnimation.start();
      break;
    }
    return true;
   }
  });

 }

 /**
  * 创建弹性动画
  * @param view 动画关联的控件
  * @param property 动画作用的属性
  * @param finalPosition 动画结束的位置
  * @param stiffness 硬度
  * @param dampingRatio 阻尼
  * @return
  */
 SpringAnimation createSpringAnimation(View view,
           DynamicAnimation.ViewProperty property,
           Float finalPosition,
           @FloatRange(from = 0.0) Float stiffness,
           @FloatRange(from = 0.0) Float dampingRatio) {
  //创建弹性动画类SpringAnimation
  SpringAnimation animation = new SpringAnimation(view, property);
  //SpringForce类,定义弹性特质
  SpringForce spring = new SpringForce(finalPosition);
  spring.setStiffness(stiffness);
  spring.setDampingRatio(dampingRatio);
  //关联弹性特质
  animation.setSpring(spring);
  return animation;
 }

}

activity_position.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context=".PositionActivity">

 <ImageView
  android:id="@+id/movingView"
  android:layout_width="128dp"
  android:layout_height="128dp"
  android:layout_gravity="center"
  android:src="@drawable/android"
  android:tint="@color/colorPrimary"
  tools:ignore="ContentDescription"/>

</FrameLayout>

触摸改变图片的位置,松开手启动动画。

翻译自https://www.thedroidsonroids.com/blog/android/springanimation-examples/,原作者使用Kotlin语言实现的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 自定义 AlertView 以及弹出动画,具有 iOS7 的扁平化风格。 [Code4App.com]

  • 动画outputBounceBounce UpBounce UpBounce In LeftBounce In RightBounce UpBounce Out DownBounce UpBounce Out LeftBounce Out RightBounce Out Up

  • 本文最初发表于[博客园](),并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我,一起入门和进阶前端。 以下是正文。 前言 本文主要内容: 过渡:transition 2D 转换 transform 3D 转换 transform 动画:animation 过渡:transition transition的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征,可以实现元素不同状态

  • 回头看看上一节显示的动画,它们是如何从一个空白的画布或白班变成一个复杂、漂亮的动画的?这些动画是怎么产生的?在变化过程中改变的特殊属性是什么?在回忆中摇晃你的手来表明一些物体应该移动或拉伸是不够的:如果你想要动画脱离你的手进入界面,你需要仔细思考在每一步中会发生什么以及哪些值被操作了。 如果你看一下上一节展示的动画GIF图,以及像CAPPTIVATE.co和其他网站展示的多种动画,并且你对发生了什

  • 属性动画 CAAnimationDelegate在任何头文件中都找不到,但是可以在CAAnimation头文件或者苹果开发者文档中找到相关函数。在这个例子中,我们用-animationDidStop:finished:方法在动画结束之后来更新图层的backgroundColor。 当更新属性的时候,我们需要设置一个新的事务,并且禁用图层行为。否则动画会发生两次,一个是因为显式的CABasicAni

  • 到目前为止我们使用的示例其实都没有边界。也就是说,当形状移动到画布的边界处时,什么都没发生,它们只是消失在我们的视野中,再也看不见了。 这也许是你需要的效果。例如,如果你只是创建一段简短的动画,并且动画在到达边界之前就会停止,或者你希望形状移动到画布之外。 但是,如果你不需要这种行为怎么办?如果你希望形状能够感知周围的环境,或者在边界处反弹回来怎么办呢?这种行为可以避免机械性的动画,使动画更加自然