animation动画属性的使用

动画的属性分析及举例—用动画控制某物（比如小车）的移动

动画的相关属性

将动画属性简写之后，animation 后面的顺序：

animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode ， animation-play-state

animation-name

这个动画的名字

animation-duration

动画持续的时间

比如：1s

animation-timing-function

规定动画的速度曲线

比如：ease(可以为任意的贝塞尔曲线)

关于贝塞尔曲线：文章

animation-delay

规定动画何时开始

比如：1s

animation-iteration-count

规定动画被播放的次数

比如：1

animation-direction

指示动画是否反向播放

比如：normal、reverse

animation-fill-mode

规定动画是留在最后一帧还是退回到开始

比如：none、forward

animation-play-state

确定动画是否在播放

比如：running、paused

举例：用动画属性控制小车的移动

分析：主要会用到 animation-play-state 这个属性

具体的代码：

<template>
    <div class="content">
        <div class="car" :style="[Style]">
            <img src="https://picgo-use-images.oss-cn-shanghai.aliyuncs.com/images/ff68bc95-ee2c-483b-b676-7a29539bab10.svg" alt="">
        </div>

        <button @click="control()">{{instructions}}</button>
    </div>
</template>

<script>
export default {
    name: "App",

    data() {
        return {
            Style: {
                "animation-play-state": "paused",
            },

            instructions: "开始",
        };
    },

    methods: {
        control() {
            if (this.Style["animation-play-state"] == "paused") {
                this.Style["animation-play-state"] = "running";
                this.instructions = "暂停";
            } else {
                this.Style["animation-play-state"] = "paused";
                this.instructions = "开始";
            }
        },
    },
};
</script>

<style>
.content {
    width: 1000px;
    height: 1000px;
    background-color: gray;
}

.car {
    width: 50px;
    height: 50px;
    animation: go 10s ease 1s 1 normal none;
}

img {
    width: 100%;
    height: 100%;
}

button {
    display: block;
    width: 50px;
    height: 30px;
    margin: 0 auto;
    margin-top: 200px;
}

@keyframes go {
    0% {
        margin-left: 0px;
    }

    100% {
        margin-left: 900px;
    }
}
</style>

效果：