Android 12.0 Launcher3 仿 iOS 长按 App 图标实现抖动动画，打造流畅操作体验

Android

2023-11-18 08:57:12

打造堪比 iOS 的顺畅操作体验：深入剖析长按 App 图标抖动动画实现

在竞争日益激烈的移动设备市场，用户体验至关重要。交互设计中的关键要素之一是动画效果，它通过提供流畅、直观的视觉反馈提升用户满意度。本文将深入浅出地揭秘长按 App 图标抖动动画的实现过程，帮助开发者将这一经典交互设计应用到自己的项目中。

准备工作

熟悉 Android 开发环境和 Java 编程
了解 Android 系统架构和组件
具备 XML 布局文件编辑能力

实现步骤

1. 准备工作

在 Launcher3 布局文件中添加 ImageView 作为抖动容器
为 ImageView 设置合适背景图片（通常为半透明圆形或矩形）

2. 动画控制

在 Launcher3 Activity 中定义控制动画的变量
在 Activity 的 onResume() 方法中，启动定时器更新动画变量
在 Activity 的 onDraw() 方法中，根据动画变量绘制动画阶段

3. 事件处理

在 Activity 的 onTouchEvent() 方法中处理长按事件
根据需要启动或停止动画

代码示例

public class Launcher3Activity extends Activity {

    private ImageView mShakeImageView;
    private boolean mIsShaking = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_launcher3);

        mShakeImageView = findViewById(R.id.shake_image_view);
    }

    @Override
    protected void onResume() {
        super.onResume();

        Timer timer = new Timer();
        timer.schedule(new TimerTask() {
            @Override
            public void run() {
                mIsShaking = !mIsShaking;
                invalidate();
            }
        }, 0, 100);
    }

    @Override
    protected void onPause() {
        super.onPause();

        timer.cancel();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mIsShaking = true;
                invalidate();
                break;
            case MotionEvent.ACTION_UP:
                mIsShaking = false;
                invalidate();
                break;
        }

        return super.onTouchEvent(event);
    }

    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        if (mIsShaking) {
            mShakeImageView.setScaleX(1.1f);
            mShakeImageView.setScaleY(1.1f);
            mShakeImageView.setRotation(10);
        } else {
            mShakeImageView.setScaleX(1.0f);
            mShakeImageView.setScaleY(1.0f);
            mShakeImageView.setRotation(0);
        }
    }
}