Android 的功能发现动画答案

【问题标题】：Feature discovery animations for AndroidAndroid 的功能发现动画
【发布时间】：2016-09-24 18:31:35
【问题描述】：

自 5 月起，Google 更新了其网站上的 Material Design 指南。我在名为Feature discovery 的新部分之一中看到了一种有趣而酷炫的设计模式。

我想实现the animation for 'discovering' the Navigation Drawer button。 Google Fit 上次更新中也有类似的动画，用于抽屉式导航和浮动操作按钮。

通常，对于 Android 动画，Google 提供了一个很棒的 UI 指南，但我们没有任何进一步的信息来为我们自己的应用程序开发它。

您知道是否有带有 Android 库的原生解决方案来实现此类动画？如果是，它是否适用于 Android 5.0 (API 21) 以下 - 它可以高于 Android 4.1+？

编辑：我做了一个 Github 项目来实现相同的动画。你可以在这里找到它：https://github.com/Guimareshh/Feature-discovery-animations

谢谢！

【问题讨论】：

任何人..请给这个赏金..tq..
你好，你做到了吗..？？
@Hardeep 与我们在谷歌设计网站上看到的动画不完全一样，但几乎是一样的。我需要更多时间来完成它。这周应该会完成，我会上传一个Github项目并编辑这个帖子以获取更多信息。
@Guimareshh 感谢您的回复。我也在做同样的工作，完成后会更新。 :)
在Android Arsenal 上发布了一个非常相似的功能库，名为HintCase。值得一试！

标签： android android-animation material-design

【解决方案1】：

您需要制作自定义动画，否则您可以使用Ripple Effect + Reveal并将其设置为导航抽屉图标，

Circular Reveal Animation

void enterReveal() {
    // previously invisible view
    final View myView = findViewById(R.id.my_view);

    // get the center for the clipping circle
    int cx = myView.getMeasuredWidth() / 2;
    int cy = myView.getMeasuredHeight() / 2;

    // get the final radius for the clipping circle
    int finalRadius = Math.max(myView.getWidth(), myView.getHeight()) / 2;

    // create the animator for this view (the start radius is zero)
    Animator anim =
        ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);

    // make the view visible and start the animation
    myView.setVisibility(View.VISIBLE);
    anim.start();
}

【讨论】：

感谢您的帮助，这个动画将帮助我创造我想要的东西。我将在 Github 上创建一个示例，我将在这篇文章中分享它！

【解决方案2】：

为回答您的问题，Google 总是提供有趣的 Widget 组件的新示例。它们中的大多数将仅添加到新版本的 Android 中。这有不同的原因。例如，因为新的小部件使用资源并且仅在具有更新的 UI 引擎的新版本的 Android 上工作。还有其他...

这就是为什么，没有谷歌官方的 Reveal 动画，它只适用于 Android 5.0 >。

但是有很多反向移植：

查看所有可用的 Android Awesome Android UI 的官方反向移植。

当 Google 推出 Android Material 时，没有任何库可以容纳所有这些元素。但在短时间内，不同的开发人员编写了许多有用的库。但在流行之后，谷歌推出了该小部件的所有库。

因此，没有向后移植，而且 Google 很可能不会引入这些小部件。但是听你的问题，我认为你可以做到这一点，使用上面链接的非官方反向端口。

【讨论】：

【解决方案3】：

我还在自定义视图中创建了这个 DesignPattern。你可以找到它here。请注意，这是我第一个发布的自定义视图，它仍在开发中（因此它们可能存在一些错误，并且缺少一些文档），但它应该足以满足日常使用。

要使用它，请将库添加到您的依赖项中：

compile 'com.cilenco.libraries:featurediscovery:1.0.2'     or
compile 'com.cilenco.libraries:featurediscovery:+'         always newest version

之后，您可以像这样创建 DiscoveryView。查看所有其他功能以调整外观和对视图的控制。

DiscoveryView discoveryView = new DiscoveryView.Builder(context, view)
.setPrimaryText(R.string.header)
.setSecondaryText(R.string.description)
.setOnClickListener(this)
.build();

discoveryView.show();

如果您发现任何错误或对此有任何新想法，请随时报告问题并向存储库提出拉取请求。

【讨论】：