CSS篇之蠕动效果

这个一个非常哈

已于 2023-04-07 11:25:55 修改

阅读量93

点赞数 1

分类专栏： css 文章标签： vue.js 前端 css Powered by 金山文档

于 2023-03-07 15:58:47 首次发布

本文链接：https://blog.csdn.net/ae_pppppp/article/details/129383116

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

采用动画库animejs

npm install animejs --save

页面引入使用

es6:
import anime from 'animejs/lib/anime.es.js';

commonJs:
const anime = require('animejs');

animejs使用，可以去官网查看案例

https://animejs.com/documentation/

此处用到的是有单位的案例

页面布局,布局的思路如下，尽量考虑自适应

<template>
  <div class="box">
    <div class="top">
      <div class="top1">34234</div>
      <div class="top2">432424</div>
    </div>
    <div class="bottom">423424242</div>
  </div>
</template>

css样式

.box {
  width: 263px;
  height: 276px;
  border: 1px solid pink;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .top {
    display: flex;
    height: 173px;
  }
  .top1 {
    height: 100%;
    background: #f9fb1b;
    width: 114px;
    border: 1px solid #000;
    box-sizing: border-box;
    border-radius: 20px;

  }
  .top2 {
    flex: 1;
    height: 100%;
    background: pink;
    border: 1px solid #000;
    box-sizing: border-box;
    border-radius: 20px;
  }
  .bottom {
    width: 261px;
    flex: 1;
    background: palegreen;
    border: 1px solid #000;
    box-sizing: border-box;
    border-radius: 20px;

  }
}

js部分，这一块主要是考虑图像变换，一个巧妙的点就是，利用正玄余玄函数，在区间内进行递增递减的思路

<script setup>
import anime from "animejs/lib/anime.es.js";
let step = 0;
const TOP1WIDTH = 114
const TOPHEIGHT = 173
const BOTTOMWIDTH = 263
onMounted(() => {
  fn();
});
const fn = () => {
  aniLoop();
  requestAnimationFrame(fn);
};
function aniLoop() {
  step += 0.05;
  const incrementX = Math.sin(step);
  const incrementY = Math.cos(step);
  scaleBox({
    ele: ".top1",
    width: TOP1WIDTH + 6 * incrementX,// 这里的 6 10 指的是可以移动的最大步长
    duration: 0.5
  });
  scaleBox({
    ele: ".top",
    height: TOPHEIGHT + 10 * incrementY,
    duration: 0.5
  });
  scaleBox({
    ele: ".bottom",
    width: BOTTOMWIDTH + 10 * incrementY,
    duration: 0.5
  });
}

const scaleBox = ({ ele, width, height, duration }) => {
  const data = {
    targets: ele,
    direction: "alternate",
    loop: true,
    easing: "easeInOutSine",
    duration
  };
  data = height ? { ...data, height } : { ...data, width };
  anime(data);
};
</script>

最后：

纯css也能实现，但是精确度不如库动画好用，下面是纯css实现思路：

@keyframes expanding {
  from {
    width: 100px;
  }
  to {
    width: 110px;
  }
}
@keyframes heighting {
  form {
    height: 100px;
    width: 261px;
  }
  to {
    height: 120px;
    width: 251px;
  }
}

定义两个动画

top1 的class 加 animation: expanding 1.5s ease 0.5s infinite alternate;

bottom的class 加 animation: heighting 1.5s ease 0.5s infinite alternate;