首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >塑造Android材质设计

塑造Android材质设计
EN

Stack Overflow用户
提问于 2015-04-27 10:41:01
回答 1查看 1.1K关注 0票数 5

我想问一下如何在android材质设计中创建改变形状的动画。这是我从安卓材料设计指南中得到的视频。

Material can change shape

谢谢。

EN

回答 1

Stack Overflow用户

发布于 2015-05-01 01:50:40

这是您链接的动画的快速实现。它使用的是支持库中的CardView,外加一个自定义的PathInterpolator,使其移动起来更像视频(默认的AccelerateDecelerateInterpolator太突然了,但在之前的棒棒糖设备中使用它)。这不是一件艺术作品,但希望这能让你想到一种可能的方式来创建这些纸质动画。

这是一个演示视频https://drive.google.com/file/d/0B7TH7VeIpgSQYkx2TVlSakZidXM/view

代码语言:javascript
运行
复制
final int origSize = getResources().getDimensionPixelSize(R.dimen.original_size);
final int origRadius = getResources().getDimensionPixelSize(R.dimen.original_radius);
final int targetRadius1 = getResources().getDimensionPixelSize(R.dimen.target_radius_1);
final int targetRadius2 = getResources().getDimensionPixelSize(R.dimen.target_radius_2);

final int targetSize1 = origSize * 2;
final int targetSize2 = origSize * 4;

final int ANIMATION_INTERVAL_MS = 600;
final int ANIMATION_DURATION_MS = 700;

private void doMaterialAnimation() {

    ValueAnimator va1 = ObjectAnimator.ofFloat(1, 0);
    va1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            transformMaterial(origSize, targetSize1, origRadius, targetRadius1, animation);
        }
    });

    ValueAnimator va2 = ObjectAnimator.ofFloat(1, 0);
    va2.setStartDelay(ANIMATION_INTERVAL_MS);
    va2.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            transformMaterial(targetSize1, targetSize2, targetRadius1, targetRadius2, animation);
        }
    });

    ValueAnimator va3 = ObjectAnimator.ofFloat(1, 0);
    va3.setStartDelay(ANIMATION_INTERVAL_MS);
    va3.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            transformMaterial(targetSize2, origSize, targetRadius2, origRadius, animation);
        }
    });

    AnimatorSet aset = new AnimatorSet();
    aset.playSequentially(va1, va2, va3);
    aset.setDuration(ANIMATION_DURATION_MS);
    aset.setInterpolator(new PathInterpolator(0.75f, 0.1f, 0.25f, 0.9f));
    aset.start();
}

private void transformMaterial(int origSize,
                               int targetSize,
                               int origRadius,
                               int targetRadius,
                               ValueAnimator animation) {

    float fraction = (float) animation.getAnimatedValue();
    cardView.setRadius(interpolate(origRadius, targetRadius, fraction));

    cardView.getLayoutParams().width = cardView.getLayoutParams().height
            = (int) ((targetSize - origSize) * (1 - fraction) + origSize);
    cardView.requestLayout();
}

private float interpolate(int from, int to, float fraction) {
    return ((from - to) * fraction) + to;
}

这是名片,仅供参考。

代码语言:javascript
运行
复制
<android.support.v7.widget.CardView
    android:id="@+id/card"
    android:background="@color/background_material_light"
    app:cardCornerRadius="@dimen/original_radius"
    android:layout_centerInParent="true"
    android:layout_width="@dimen/original_size"
    android:layout_height="@dimen/original_size"
    >
票数 7
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/29886333

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档