知识储备

​​  在阅读本篇前，您需要了解什么是小故事，可以查看开发小故事前期准备、小故事的组织结构、创建小故事的封面了解基础信息；

使用小故事内置动画

​​  为了小故事页面更生动，您可以为页面上的元素添加一些入场动画。

  • 示例：

为小故事段落中的元素添加交互动画 - 图1

​​  mip-story组件中已封装好了一些常用的动画类型，您可以按照下面描述的方法使用；

小故事内置的动画

基本用法

​​  通过给页面元素添加 animate-in 属性来进行入场元素动画的设置；

  1. <style mip-custom>
  2.     mip-story-view {
  3.         color: #fff;
  4.     }
  5.     h1 {
  6.         text-align: center;
  7.     }
  8.     .box {
  9.         width: 100px;
  10.         height: 100px;
  11.         background-color: #09f;
  12.         margin-top: 30px;
  13.         margin-left: auto;
  14.         margin-right: auto;
  15.     }
  16.     </style>
  17. <mip-story>
  18.     <mip-story-view>
  19.         <mip-story-layer template="vertical">
  20.             <h1>fade-in</h1>
  21.             <!-- 内置动画的使用方式如下 -->
  22.             <div animate-in="fade-in" class="box"></div>
  23.         </mip-story-layer>
  24.     </mip-story-view>
  25. </mip-story>

在小故事的框架中，我们提供了以下预设动画：

animate-in 默认动画时间（ms） 说明
fade-in 500 淡入
fly-in-top 500 上侧滑入
fly-in-bottom 500 下侧滑入
fly-in-left 500 左侧滑入
fly-in-right 500 右侧滑入
twirl-in 1000 旋转进入
whoosh-in-left 500 左侧飞入
whoosh-in-right 500 右侧飞入
rotate-in-left 700 左侧旋转飞入
rotate-in-right 700 右侧旋转飞入
  • 示例：

为小故事段落中的元素添加交互动画 - 图2

动画的高级属性

​​  在设置了上述animate-in 属性的配置后，元素可实现相关的动画。同时我们还支持一些其他的动画配置，用于动画的细节调整，入场动画还支持的配置项如下：

  • animate-in-delay：延迟
    • 这是延迟启动动画的时间量。例如，.3s的延迟表示动画在.3秒后进入页面。延迟0s立即开始动画。
    • 是否必填：否
    • 取值：ms/s
  • animate-in-duration：持续时间
    • 这是动画发生的时间量。例如，从开始到结束的淡入动画需要500毫秒。
    • 是否必填：否
    • 取值：ms/s
  • animate-in-after ：开始时间
    • 这是动画发生的开始时间。例如，上述示例中，每个动画都是相对于上一个动画结束开始。
    • 是否必填：否
    • 取值：带有动画元素的id

​​  您可以通过更改animate-in-delay、animate-in-duration和animate-in-after 这些属性的值来调节动画的细节。

  • 示例
  1. <mip-story-layer>
  2.     <!-- 以fade-in的形式入场，动画时间持续1000ms, 动画开始前延迟1000ms-->
  3.     <h1 animate-in="fade-in" animate-in-duration="1000" animate-in-delay="1000"  id="first-animate">最佳影片</h1>
  5.     <!--在id为 first-animate 的元素动画动画结束之后开始执行-->
  6.     <p animate-in="fly-in-left" animate-in-after="first-animate">钢铁侠是一部非常好的科幻片。</p>
  7. </mip-story-layer>

动画的使用案例

​​  首先可通过以下代码实现一个静态页面。

  1. <mip-story-view>
  2.     <mip-story-layer template="fill">
  3.         <mip-img  layout="responsive" width="480" height="720" src="https://www.mipengine.org/static/img/mip-story/p7.png"></mip-img>
  4.     </mip-story-layer>
  5.     <mip-story-layer>
  6.         <div class="common-wrap1">
  7.             <span></span>
  8.             <span>最佳动画短片</span>
  9.             <span>亲爱的篮球</span>
  10.             <span></span>
  11.             <span>最佳动画长片</span>
  12.             <span>寻梦环游记</span>
  13.         </div>
  14.     </mip-story-layer>
  15.     <mip-story-layer>
  16.         <div class="mask"></div>
  17.     </mip-story-layer>
  18. </mip-story-view>
  • 示例：

为小故事段落中的元素添加交互动画 - 图3

​​  在此基础上添加动画，为了使得页面生动，可以添加动画效果。首先制作文本的入口动画，使其在页面中展现淡入的动画效果，像这样添加animate-in="fade-in"到<span>元素：

  1. <mip-story-view>
  2.     <mip-story-layer template="fill">
  3.         <mip-img  layout="responsive" width="480" height="720" class="fade-in-scale" src="https://www.mipengine.org/static/img/mip-story/p7.png"></mip-img>
  4.     </mip-story-layer>
  5.     <mip-story-layer>
  6.         <div class="common-wrap1">
  7.             <span></span>
  8.             <span animate-in="fade-in" id="sixth-animation">最佳动画短片</span>
  9.             <span>亲爱的篮球</span>
  10.             <span></span>
  11.             <span>最佳动画长片</span>
  12.             <span>寻梦环游记</span>
  13.         </div>
  14.     </mip-story-layer>
  15.     <mip-story-layer>
  16.         <div class="mask"></div>
  17.     </mip-story-layer>
  18. </mip-story-view>

​​  接下来，给每个图片添加动画。

  1. <mip-story-view>
  2.     <mip-story-layer template="fill">
  3.         <mip-img  layout="responsive" width="480" height="720" class="fade-in-scale" src="https://www.mipengine.org/static/img/mip-story/p7.png"></mip-img>
  4.     </mip-story-layer>
  5.     <mip-story-layer>
  6.         <div class="common-wrap1">
  7.             <span></span>
  8.             <span animate-in="fade-in" id="sixth-animation">最佳动画短片</span>
  9.             <span animate-in="fly-in-left" animate-in-duration=400 animate-in-after="sixth-animation">亲爱的篮球</span>
  10.             <span></span>
  11.             <span animate-in="fade-in" id="sixth-animation">最佳动画长片</span>
  12.             <span animate-in="fly-in-right" animate-in-duration=400 animate-in-after="sixth-animation">寻梦环游记</span>
  13.         </div>
  14.     </mip-story-layer>
  15.     <mip-story-layer>
  16.         <div class="mask"></div>
  17.     </mip-story-layer>
  18. </mip-story-view>
  • 示例：

为小故事段落中的元素添加交互动画 - 图4

使用css动画

​​  当然，内置的动画在某些场景下无法完全满足需求，因此，我们也兼容传统的css aniamtion属性动画，您可以在页面中<style mip-custom></style> 中定义您的css animation, 并在元素中使用；

[notice] 由于customElement在IOS 11.3上的css animation 存在些兼容性问题，直接使用css动画可能会导致部分情况下动画第一帧丢失，这个问题我们正在解决中。您可以通过显示的为mip-story组件声明display属性来避免这个问题；

  1. <!DOCTYPE html>
  2. <html mip>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>小故事内置动画效果示意图</title>
  6.     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,user-scalable=no">
  7.     <link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/v1/mip.css">
  8.     <link rel="canonical" href="http://www.1905.com/mip/oscar">
  9.     <style mip-custom>
  10.         mip-story {
  11.               display:none;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <mip-story>
  17.         ...
  18.     </mip-story>
  19.     <!-- MIP 运行环境 -->
  20.     <script src="https://c.mipcdn.com/static/v1/mip.js"></script>
  21.     <!-- 小故事依赖脚本 -->
  22.     <script src="https://c.mipcdn.com/static/v1/mip-share/mip-share.js"></script>
  23.     <script src="https://c.mipcdn.com/static/v1/mip-story/mip-story.js"></script>
  24.     <script src="https://c.mipcdn.com/static/v1/mip-stats-baidu/mip-stats-baidu.js"></script>
  25.     <script src="https://c.mipcdn.com/static/v1/mip-scrollbox/mip-scrollbox.js"></script>
  26. </body>
  27. </html>

上一节：为小故事添加更多的内容段落。

下一节：为小故事添加背景音乐。

小故事开发系列教程

一、开发小故事前期准备

二、小故事的组织结构

三、为小故事创建一个封面

四、为小故事添加更多的内容段落

五、为小故事段落中的元素添加交互动画

六、为小故事添加背景音乐

七、为小故事添加封底页面

八、为小故事添加页面统计

九、对小故事进行页面代码规范校验