Question

我正在为网络进行一些动画原型制作，并注意到材料设计包含了一些非常先进的东西。虽然很多动画的例子都可以在网上看到，但我找到了一个让我真正感兴趣的例子，因为它是流畅的动作。在音乐播放器中有一个过渡视频，其中一个容器从网格中脱离，信息从它后面滑出，一个彩色的气泡从它上面生长并覆盖屏幕，同时溶解以显示背景图像。

您可以在“视觉连续性”下找到视频（在平板电脑上显示，但不是更少） http://www.google.com/design/spec/animation/meaningful-transitions.html

这与我习惯的东西相差甚远，经过五次尝试失败之后，我想看看其他人是如何处理这个问题的。关于结构，定位规则或其他任何想法？

Answer 1

您可以使用此结构执行此操作：

<div class="container">
  <div class="image-container"></div>
  <img src="coolimage.png">

</div>

图像容器的background-color和border-radius为50％，因此它保持为圆形（您可能需要更改高度/宽度才能执行此操作）。

然后，在图片上的点击事件期间，您会引发元素的z-index，transform: scale() image-container，以便它填充更大的容器（需要overflow:hidden ）。在此期间，您还可以将图像移动到任何您想要的位置。确保按照Material Design指定的方式应用easeOut过渡。

Answer 2

我将从Polymer - https://www.polymer-project.org/

开始

然后，请务必查看Material Design演示页面和app：

https://www.polymer-project.org/docs/elements/material.html

JS＆amp; S的高级材料设计过渡CSS - 从哪里开始？

2 个答案: