markdown 摇动动画
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了markdown 摇动动画相关的知识，希望对你有一定的参考价值。
# How to do a Shaking animation
## Very short, to the point answer:
```java
private void expandBalloon(final View view, final ViewGroup container) {
int startDelay = 100;
ValueAnimator animator = ValueAnimator.ofFloat(0.0F, 1.0F).setDuration(150L);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
Random random = new Random();
public void onAnimationUpdate(ValueAnimator animation) {
// shaking animation
view.setTranslationX((this.random.nextFloat() - 0.5F) * (float) view.getWidth() * 0.05F);
view.setTranslationY((this.random.nextFloat() - 0.5F) * (float) view.getHeight() * 0.05F);
}
});
animator.start();
view.animate().setDuration(150L).setStartDelay((long) startDelay).scaleX(2.0F).scaleY(2.0F).alpha(0.0F)
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
if (getContext() != null) {
AnimationUtil.explodeBalloon(getContext(), container);
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
doGiftInitAnimation();
}
}, 500);
}
}
});
}
```
## Long Answer:
You will need [Confetti](https://github.com/jinatonic/confetti)
```
compile 'com.github.jinatonic.confetti:confetti:1.1.1'
```
```java
View v = inflater.inflate(R.layout.fragment_reward, container, false);
final ViewGroup animContainer = v.findViewById(R.id.fragment_reward_animation_container);
mGiftImageView = v.findViewById(R.id.fragment_reward_gift_image_view);
final View balloon = v.findViewById(R.id.fragment_reward_baloon_image_view);
final View sun = v.findViewById(R.id.fragment_reward_sun_image_view);
final View cloud1 = v.findViewById(R.id.fragment_reward_double_cloud_image_view);
final View cloud2 = v.findViewById(R.id.fragment_reward_cloud_2_image_view);
final View cloud3 = v.findViewById(R.id.fragment_reward_cloud_image_view);
balloon.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
balloon.getViewTreeObserver().removeOnGlobalLayoutListener(this);
doCloudAnim(sun, cloud1, cloud2, cloud3);
doBalloonInitAnim(balloon, animContainer);
}
});
....
private void doCloudAnim(View v1, View v2, View v3, View v4) {
if (getContext() != null) {
if (GlobalVariable.screenWidth <= 0) {
GlobalVariable.screenWidth = DisplayUtil.getScreenWidth(getContext());
}
v1.animate().x(v1.getX() - GlobalVariable.screenWidth).setDuration(100000);
v2.animate().x(v2.getX() - GlobalVariable.screenWidth).setDuration(32000);
v3.animate().x(v3.getX() - GlobalVariable.screenWidth).setDuration(35000);
v4.animate().x(v4.getX() - GlobalVariable.screenWidth).setDuration(20000);
}
}
private void doBalloonInitAnim(View v, ViewGroup container) {
if (getContext() != null) {
final float origCenterY = v.getY() - v.getHeight();
v.setY(v.getY() + DisplayUtil.dpToPx(getContext(), 100));
bounceBalloon(v, origCenterY, container);
}
}
private void bounceBalloon(final View v, float position, final ViewGroup container) {
SpringAnimation anim = new SpringAnimation(v, DynamicAnimation.TRANSLATION_Y, position);
anim.getSpring().setDampingRatio(SpringForce.DAMPING_RATIO_MEDIUM_BOUNCY); //between LOW and MEDIUM bouncy
anim.getSpring().setStiffness(SpringForce.STIFFNESS_VERY_LOW);
anim.addEndListener(new DynamicAnimation.OnAnimationEndListener() {
@Override
public void onAnimationEnd(DynamicAnimation animation, boolean canceled, float value, float velocity) {
expandBalloon(v, container);
}
});
anim.start();
}
private void expandBalloon(final View view, final ViewGroup container) {
int startDelay = 100;
ValueAnimator animator = ValueAnimator.ofFloat(0.0F, 1.0F).setDuration(150L);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
Random random = new Random();
public void onAnimationUpdate(ValueAnimator animation) {
// shaking animation
view.setTranslationX((this.random.nextFloat() - 0.5F) * (float) view.getWidth() * 0.05F);
view.setTranslationY((this.random.nextFloat() - 0.5F) * (float) view.getHeight() * 0.05F);
}
});
animator.start();
view.animate().setDuration(150L).setStartDelay((long) startDelay).scaleX(2.0F).scaleY(2.0F).alpha(0.0F)
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
if (getContext() != null) {
AnimationUtil.explodeBalloon(getContext(), container);
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
doGiftInitAnimation();
}
}, 500);
}
}
});
}
private void doGiftInitAnimation() {
if (getContext() != null) {
View v = mGiftImageView;
v.setVisibility(View.VISIBLE);
final float origCenterY = v.getY() - v.getHeight();
v.setY(origCenterY - DisplayUtil.dpToPx(getContext(), 250));
bounceGift(v, origCenterY);
}
}
private void bounceGift(View v, float position) {
SpringAnimation anim = new SpringAnimation(v, DynamicAnimation.TRANSLATION_Y, position);
anim.getSpring().setDampingRatio(SpringForce.DAMPING_RATIO_HIGH_BOUNCY); //between LOW and MEDIUM bouncy
anim.getSpring().setStiffness(SpringForce.STIFFNESS_LOW);
anim.start();
}
//AnimationUtil
public static void explodeBalloon(Context ctx, ViewGroup container) {
int[] colors = ctx.getResources().getIntArray(R.array.red_palette);
final int containerMiddleX = container.getWidth() / 2;
final int containerMiddleY = container.getHeight() / 2;
CommonConfetti con = CommonConfetti.explosion(container, containerMiddleX, containerMiddleY, colors);
con.getConfettiManager().setBound(new Rect(container.getLeft(), container.getTop(), container.getRight(), container.getBottom()));
con.oneShot();
}
```
Sample layout for the above code:
```xml
<android.support.constraint.ConstraintLayout
android:id="@+id/fragment_reward_animation_container"
android:layout_width="match_parent"
android:layout_height="300dp"
app:layout_collapseMode="parallax"
android:background="@drawable/reward_gradient_background"
android:fitsSystemWindows="true">
<ImageView
android:id="@+id/fragment_reward_sun_image_view"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.15"
android:src="@drawable/img_sunny_50dp"/>
<ImageView
android:id="@+id/fragment_reward_double_cloud_image_view"
android:layout_width="80dp"
android:layout_height="80dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.95"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:src="@drawable/img_cloud_double_80dp"/>
<ImageView
android:id="@+id/fragment_reward_cloud_2_image_view"
android:layout_width="70dp"
android:layout_height="70dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintHorizontal_bias="0.55"
app:layout_constraintVertical_bias="0.2"
android:src="@drawable/img_cloud2_70dp"/>
<ImageView
android:id="@+id/fragment_reward_baloon_image_view"
android:layout_width="120dp"
android:layout_height="120dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.65"
android:src="@drawable/img_balloon_120dp"/>
<ImageView
android:id="@+id/fragment_reward_gift_image_view"
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:src="@drawable/img_gift_100dp"
android:visibility="invisible"/>
<ImageView
android:id="@+id/fragment_reward_cloud_image_view"
android:layout_width="90dp"
android:layout_height="90dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.81"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.75"
android:src="@drawable/img_cloud1_90dp"/>
</android.support.constraint.ConstraintLayout>
```以上是关于markdown 摇动动画的主要内容，如果未能解决你的问题，请参考以下文章