[Angular实战网易云]——24、动画

动画

在基本实现了底部播放面板的显示之后就可以为面板做一层动画，来实现底部面板的显隐。底部就只会显示一个小按钮

---

angular动画

这里就要提到强大的angular动画了，关于更详细的教程可以去angular官网去搜索动画教程。

动画用于提供运动的幻觉：HTML 元素随着时间改变样式。精心设计的动画可以让你的应用更有趣，更易用，但它们不仅仅是装饰性的。动画可以通过几种方式改善你的应用和用户体验：

• 没有动画，Web 页面的转场就会显得突兀、不协调。
• 运动能极大地提升用户体验，因此动画可以让用户察觉到应用对他们的操作做出了响应。
• 良好的动画可以直观的把用户的注意力吸引到要留意的地方。

典型的动画会涉及多种随时间变化的转换。HTML 元素可以移动、变换颜色、增加或缩小、隐藏或从页面中滑出。 这些变化可以同时发生或顺序发生。你可以控制每次转换的持续时间。

Angular 的动画系统是基于 CSS 功能构建的，这意味着你可以 “动” 浏览器认为可动的任何属性。包括位置、大小、变形、颜色、边框等。W3C 在它的 CSS Transitions（转场） 页中维护了一个可动属性的列表。

---

场景

当我们将鼠标悬浮到底部时，面板自下而上显示，当离开面板区域时，面板自上而下隐藏。同时也要为小按钮添加锁定面板的功能。

定义动画

• wy-player.component.html

@Component({
    selector: 'app-wy-player',
    templateUrl: './wy-player.component.html',
    styleUrls: ['./wy-player.component.less'],
    animations: [trigger('showHide', [
        state('show', style({ bottom: 0 })),
        state('hide', style({ bottom: -71 })),
        transition('show=>hide', [animate('0.3s')]),
        transition('hide=>show', [animate('0.1s')])
    ])]
})

    showPlayer = 'hide'; // 动画初始状态
    isLocked = false; // 面板是否被锁
    animating = false; // 是否正在动画
    
  // 面板动画
    togglePlayer (type: string) {
        if (!this.isLocked && !this.animating) {
            this.showPlayer = type;
        }
    }
    

angular 要求在组件的 @Component() 装饰器中，添加一个名叫 animations: 的元数据属性。 你可以把用来定义动画的触发器放进 animations 元数据属性中。

使用trigger来为当前动画添加触发器，第一个参数为触发器的名称，第二个参数用数组来包装所用的状态和转场。state声明状态，第一个参数是状态名称，第二个参数是样式对象。transition表示转场动画，其中第一个参数表示状态指向变化，第二个参数表示动画元数据animate

动画元数据
animate() 函数（作为转场函数的第二个参数）可以接受 timings 和 styles 参数。timings 参数接受一个由三部分组成的字符串。

• animate (‘duration delay easing’)

• 第一部分 duration（持续时间）是必须的。这个持续时间可以表示成一个不带引号的纯数字（表示毫秒），或一个带引号的有单位的时间（表示秒数）。比如，0.1 秒的持续时间有如下表示方式：

• 作为纯数字，毫秒为单位：100
• 作为字符串，毫秒为单位：‘100ms’
• 作为字符串，秒为单位：‘0.1s’

第二个参数 delay 的语法和 duration 一样。比如：

• 等待 100 毫秒，然后运行 200 毫秒表示为：‘0.2s 100ms’

第三个参数 easing 控制动画在运行期间如何进行加速和减速。比如 ease-in 表示动画开始时很慢，然后逐渐加速。

• 等待 100 毫秒，运行 200 毫秒。按照减速曲线运动，快速启动并逐渐减速，直到静止：‘0.2s 100ms ease-out’
• 运行 200 毫秒，不等待。按照标准曲线运动，开始很慢，中间加速，最后逐渐减速：‘0.2s ease-in-out’
• 立即开始，运行 200 毫秒。按照加速曲线运动，开始很慢，最后达到全速：‘0.2s ease-in’

---

使用动画

为组件定义好这些动画触发器之后，你可以给触发器名称加上 @ 前缀并包在方括号里，来把它附加到组件模板中的元素上。然后，你可以使用 Angular 的标准属性绑定语法，来把这个触发器绑定到模板表达式上。这里的 showHide就是触发器的名称，而 showPlayer的求值结果是前面定义过的动画状态之一。

• wy-player.component.html

<div class="m-player" 
    [@showHide]="showPlayer"
     (mouseenter)="togglePlayer('show')"
     (mouseleave)="togglePlayer('hide')"
     (@showHide.start)="animating = true"
     (@showHide.done)="animating = false"
     >
</div>

当鼠标滑过时就会触发mouseenter，此时就会改变面板的默认状态，触发器就会执行 ‘hide => show’ 的动画。关于动画的改变是根据底部面板的高度来决定的，改变元素底边缘的值实现显隐。