六、展示信息添加 animation 动态效果

已于 2024-01-12 10:26:04 修改
阅读量593 收藏
点赞数
分类专栏： 互联网个人简历 文章标签： typescript 前端 vue.js
于 2023-09-19 14:16:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49175501/article/details/133026747
版权

简介

给每个信息组件内容添加动画效果，通过 animation 来怎么增强用户浏览时的交互体验。⭐️ 欢迎访问个人的简历网站预览效果

本章涉及修改与新增的文件：App.vue、main.ts、first.vue 、second.vue、third.vue 、fourth.vue 、fifth.vue

在这里插入图片描述

一、安装 animae 插件

先安装 animate 效果插件 动态效果官网地址

npm install animate.css --save

再将 animate 效果插件引入 main.ts 中

import { createApp } from 'vue'
import './style.css'
import 'animate.css'; // 引入 animate
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)


app.use(ElementPlus, { size: 'small', zIndex: 3000 })
app.mount('#app')

二、添加动态效果

first.vue 添加效果
<template>
  <div class="container">
    <!-- 头像 添加动画 -->
    <el-avatar class="animation" :size="120" :src="avatarImg" />

    <!-- 座右铭 添加动画-->
    <div class="motto text-spacing">
      <span>
        <span :class="item.checked ? 'animation-hinge' : 'text-cursor'" v-for="(item, index) of textArr"
          @click="clickText(index)">
          {{ item.text }}
        </span>
      </span>
      <el-divider />
    </div>
    <!-- 简单信息 添加动画-->
    <div class="info" :class="count === 0 ? 'animation-fadeIn' : ''">
      <div class="margin-tb-xl">吴少繁</div>
      <div>全栈工程师</div>
      <div class="margin-tb-xl flex">
        <div><img src="/email.svg" class="logo" alt="Email" />1195951949@qq.com</div>
        <div class="margin-lr"> | </div>
        <div><img src="/phone.svg" class="logo" alt="Phone" />18226193345</div>
      </div>
      <div>在职 · 浙江杭州</div>
    </div>
  </div>
</template>
<script setup lang="ts" name="First">
import avatarImg from '../assets/avatar.png'
import { reactive } from 'vue'
defineProps({
  count: {
    type: Number
  },
});
const textArr = reactive([
  { text: '知微知彰，', checked: false },
  { text: '知柔知刚；', checked: false },
  { text: '富在术数，', checked: false },
  { text: '不在劳身；', checked: false },
  { text: '利在势居，', checked: false },
  { text: '不在力耕。', checked: false }
])

const clickText = (index: number) => {
  textArr[index].checked = true
}

const resetArr = () => {
  for (let item of textArr) {
    item.checked = false
  }
}

// 重置动画效果需要用到
defineExpose({
  resetArr
})
</script>

<style scoped>
.animation:hover {
  animation: heartBeat;
  animation-duration: 1s;
}


.animation-fadeIn {
  animation: fadeIn;
  animation-duration: 1.5s;
}


.info {
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-family: 'KaiTi', sans-serif;
}

.logo {
  margin-right: 5px;
  width: 18px;
  height: 18px;
}
</style>
second.vue 添加效果
<template>
  <div class="container">
    <!-- 标题 -->
    <div class="motto">
      <span style="font-size: 30px;">基本信息</span>
      <el-divider />
    </div>
    <!-- 简介 -->
    <div class="intr text-spacing">
      毕业于云南大学软件工程专业，从业四年有余，熟习js和node前后端开发，熟习Vue和nestjs框架开发，熟习uniapp跨平台开发小程序及H5等。
    </div>

    <div class="margin-top-xl flex padding-top family" style="width: 60%;">
      <div class="flex justify-center" style="width: 40%;">
        <el-avatar class="animation" :size="220" :src="avatarImg" />
      </div>
      <div style="width:30%" :class="count === 1 ? 'animation-fadeInRight' : ''">
        <div>姓名 | 吴少繁</div>
        <div class="margin-tb-xl">性别 | 男</div>
        <div>出生 | 1996.01.13</div>
        <div class="margin-tb-xl">居住 | 浙江杭州西湖区</div>
        <div>学历 | 本科</div>
        <div class="margin-tb-xl">专业 | 软件工程</div>
      </div>
      <div style="width:30%" :class="count === 1 ? 'animation-fadeInRight' : ''">
        <div>手机 | 18226193345</div>
        <div class="margin-tb-xl">邮箱 | 18226193345@163.com</div>
        <div>QQ号 | 1195951949</div>
        <div class="margin-tb-xl">户籍 | 安徽合肥</div>
        <div>学校 | 云南大学</div>
      </div>
    </div>

  </div>
</template>
<script setup lang="ts" name="Second">
import avatarImg from '../assets/avatar.png'
defineProps({
  count: {
    type: Number
  },
});
</script>

<style scoped>
.animation-fadeInRight {
  animation: fadeInRight;
  animation-duration: 1s;
}

.animation:hover {
  animation: jello;
  animation-duration: 1s;
}

.family {
  letter-spacing: 1px;
  line-height: 1.2;
  font-family: 'KaiTi', sans-serif;
}
</style>
third.vue 添加效果
<template>
  <div class="container">
    <div class="motto">
      <span style="font-size: 30px;">教育经历</span>
      <el-divider />
    </div>
    <!-- 简介 -->
    <div class="intr text-spacing">
      <span :class="item.checked ? 'animation-hinge' : 'text-cursor'" v-for="(item, index) of textArr"
        @click="clickText(index)">
        {{ item.text }}
      </span>
    </div>

    <div class="margin-top-xl flex padding-top" style="width: 60%;">
      <div class="flex flex-direction justify-between align-center padding-tb" style="width:15%;min-width: 130px;">
        <div class="yunnan sphere" :class="count === 2 ? 'animation-fadeIn' : ''" />
        <div class="duyi sphere" :class="count === 2 ? 'animation-fadeIn' : ''" />
      </div>

      <el-divider direction="vertical" style="height: 100%;" />
      <div class="family padding-left-xl" style="width:85%">
        <div class="square" :class="count === 2 ? 'animation-bounceInRight' : ''" style="animation-duration: 1s;">
          <div>学习时间：2015.09 - 2019.07</div>
          <div class="margin-tb-xs">学习技能：</div>
          <div>·计算机安全，程序设计语言，数据库，数据结构，软件开发工具，操作系统，设计模式等</div>
          <div class="margin-top-xs">·基本办公软件，Word文档，PPT，Excel，Ps，VScode</div>
        </div>
        <div class="square margin-top-xl" :class="count === 2 ? 'animation-bounceInRight' : ''"
          style="animation-duration: 1.2s;">
          <div>学习时间：2019.08 - 2019.12</div>
          <div class="margin-tb-xs">学习技能：</div>
          <div>·掌握了 HTML、HTML 5、CSS、CSS3、JavaScript 开发标准</div>
          <div class="margin-top-xs">·掌握了 Vue全家桶、Vuex 状态管理；Vue-Router路由前端搭建框架标准</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="Third">
import { reactive } from 'vue'
defineProps({
  count: {
    type: Number
  },
});

const textArr = reactive([
  { text: '夫学须志也，', checked: false },
  { text: '才须学也。', checked: false },
  { text: '非学无以广才，', checked: false },
  { text: '非志无以成学。', checked: false },
])
const clickText = (index: number) => {
  textArr[index].checked = true
}

const resetArr = () => {
  for (let item of textArr) {
    item.checked = false
  }
}

defineExpose({
  resetArr
})
</script>

<style scoped>
.animation-bounceInRight {
  animation: bounceInRight;
}

.animation-fadeIn {
  animation: fadeIn;
  animation-duration: 1.8s;
}

.family {
  letter-spacing: 1px;
  line-height: 1.5;
  font-family: 'KaiTi', sans-serif;
}

.sphere {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-size: 100% 100%;
  box-shadow: 3px 3px 3px 3px rgba(10, 10, 10, .2);
}

.square {
  position: relative;
  width: 100%;
  padding: 20px;
  border-radius: 10px;
  background-color: rgba(10, 10, 10, .3);
  box-shadow: 6px 5px 2px 2px rgba(10, 10, 10, .3);
}

.square::before {
  position: absolute;
  content: '';
  z-index: 20;
  left: -30px;
  top: 50px;
  border: 15px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 15px solid rgba(10, 10, 10, .3);
}

.yunnan {
  background-image: url('../assets/yunnan.png');
}

.duyi {
  background-image: url('../assets/duyi.png');
}
</style>
fourth.vue 添加效果
<template>
  <div class="container">
    <div class="motto">
      <span style="font-size: 30px;">专业技能</span>
      <el-divider />
    </div>
    <!-- 简介 -->
    <div class="intr text-spacing">
      <span :class="item.checked ? 'animation-hinge' : 'text-cursor'" v-for="(item, index) of textArr"
        @click="clickText(index)">
        {{ item.text }}
      </span>
    </div>

    <div class="margin-top-xl flex padding-top" style="width: 60%;">
      <div :class="count === 3 ? 'animation-fadeInLeft' : ''" style="width: 40%;padding-right:50px">
        <div class="margin-bottom">
          <span style="font-style: italic;">JavaScript、TypeScript</span>
          <el-progress color="#F05D4B" :percentage="95" :text-inside="true" :stroke-width="15" striped striped-flow
            :duration="30" />
        </div>
        <div class="margin-bottom">
          <span style="font-style: italic;">HTML、HTML5</span>
          <el-progress color="#e03997" :percentage="96" :text-inside="true" :stroke-width="15" striped striped-flow
            :duration="30" />
        </div>
        <div class="margin-bottom">
          <span style="font-style: italic;">CSS、CSS3</span>
          <el-progress color="#fbbd08" :percentage="92" :text-inside="true" :stroke-width="15" striped striped-flow
            :duration="30" />
        </div>

        <div class="margin-bottom">
          <span style="font-style: italic;">Vue、Vue3</span>
          <el-progress color="#42b883" :percentage="98" :text-inside="true" :stroke-width="15" striped striped-flow
            :duration="30" />
        </div>
        <div class="margin-bottom">
          <span style="font-style: italic;">Uniapp、小程序</span>
          <el-progress color="#0081ff" :percentage="95" :text-inside="true" :stroke-width="15" striped striped-flow
            :duration="30" />
        </div>
        <div class="margin-bottom">
          <span style="font-style: italic;">Nodejs、Nestjs</span>
          <el-progress color="#39b54a" :percentage="93" :text-inside="true" :stroke-width="15" striped striped-flow
            :duration="30" />
        </div>
        <div class="margin-bottom">
          <span style="font-style: italic;">React</span>
          <el-progress color="#149eca" :percentage="90" :text-inside="true" :stroke-width="15" striped striped-flow
            :duration="30" />
        </div>
      </div>
      <ul class="family" :class="count === 3 ? 'animation-fadeInUp' : ''" style="width:60%;padding-left:40px">
        <li>掌握 HTML、HTML 5、CSS、CSS3、JavaScript、TypeScript 标准；</li>
        <li class="margin-tb-lg">掌握 ES6，箭头函数、class 类、Promise 对象、ES6 模块化、异步async 等</li>
        <li>掌握 Vue2全家桶、Vue3全家桶、vite构建工具；Vuex 状态管理；Vue-Router路由；</li>
        <li class="margin-tb-lg">掌握 element-UI、AntD-UI、element-UI-Plus；Vant-UI、color-UI、uView-UI 等组件库；</li>
        <li>掌握 React全家桶、Redux状态管理、React-router-dom路由；</li>
        <li class="margin-tb-lg">uniapp、H5、微信、支付宝小程序开发技术等；</li>
        <li>掌握 Nodejs，Mysql，Java；nestjs、websockets后端接口开发框架等，宝塔服务器、Nginx代理相关操作；</li>
        <li class="margin-tb-lg">掌握 Electron 桌面应用开发；</li>
        <li>掌握打包工具 Webpack 的基本使用；</li>
        <li class="margin-top-lg">掌握Git，SVN 进行版本控制和代码托管；</li>
      </ul>
    </div>
  </div>
</template>
<script setup lang="ts" name="Fourth">
import { reactive } from 'vue'
defineProps({
  count: {
    type: Number
  },
});

const textArr = reactive([
  { text: '生于忧患，', checked: false },
  { text: '死于安乐；', checked: false },
  { text: '力学如力耕，', checked: false },
  { text: '勤惰尔自知；', checked: false }
])
const clickText = (index: number) => {
  textArr[index].checked = true
}

const resetArr = () => {
  for (let item of textArr) {
    item.checked = false
  }
}

defineExpose({
  resetArr
})
</script>

<style scoped>
.animation-fadeInUp {
  animation: fadeInUp;
  animation-duration: 1s;
}

.animation-fadeInLeft {
  animation: fadeInLeft;
  animation-duration: 1s;
}

.family {
  font-family: 'KaiTi', sans-serif;
  letter-spacing: 1px;
  line-height: 1.2;
}
</style>
fifth.vue 添加效果
<template>
  <div class="container">
    <div class="motto">
      <span style="font-size: 30px;">工作经验</span>
      <el-divider />
    </div>

    <div class="intr text-spacing">
      <span v-for="(item, index) of textArr" :Key="index">
        {{ item.text }}
      </span>
    </div>

    <div class="margin-top-xl flex padding-top" style="width: 60%;">
      <div class="flex flex-direction justify-around align-center padding-tb" style="width:15%;min-width: 140px;">
        <div class="sphere" style="backgroundColor: #F05D4B;">
          <span>24个月 +</span>
          <span class="text18">浙江怡宁健康</span>
        </div>
        <div class="sphere" style="backgroundColor: #1cbbb4;">
          <span>19个月</span>
          <span class="text18">杭州云号科技</span>
        </div>
      </div>

      <el-divider direction="vertical" style="height: 100%;" />
      <div class="family padding-left-xl" style="width:85%">
        <div class="square">
          <div>工作时间：2021.10 - 至 今</div>
          <div class="margin-tb-xs">担任岗位：前端开发组长</div>
          <div>工作内容：</div>
          <div class="margin-tb-xs">
            <div>·参与项目开发会议，召开组内会议，分配工作内容，跟进项目进度；</div>
            <div>·项目技术框架搭建，业务逻辑梳理，结构框架搭建，技术栈选型，研究新技术优化项目代码，不定期组内成员code review分享经验心得；</div>
            <div>
              <span>·开发维护</span>
              <el-link class="margin-left-sm text15" type="warning"
                @click="showProjectDetail('center')">智慧医院数据中心</el-link>
              <el-link class="margin-left-sm text15" type="warning"
                @click="showProjectDetail('SaaS')">怡宁SaaS智慧医院</el-link>
              <el-link class="margin-left-sm text15" type="warning" @click="showProjectDetail('wzkn')">康宁智慧医院</el-link>
              <el-link class="margin-left-sm text15" type="warning"
                @click="showProjectDetail('yining')">怡宁心理智慧医院</el-link>
            </div>
          </div>
          <!-- 公司各类项目趋于稳定，实行降本增效，只留下领导层，被动离职。 -->
          <div>离职原因：</div>
        </div>
        <div class="square margin-top-xl">
          <div>工作时间：2020.03 - 2021.10</div>
          <div class="margin-tb-sm">担任岗位：前端开发程序员</div>
          <div>工作内容：</div>
          <div class="margin-tb-xs">
            <div>·完成每日规划的项目任务，同步及跟进任务进度，按时交付项目内容；</div>
            <div>·梳理业务逻辑，结构框架搭建，技术栈选型，UI模型设计，PC端后台开发，uniapp H5开发</div>
            <div>
              <span>·开发维护</span>
              <el-link class="margin-left-sm text15" type="warning" @click="showProjectDetail('shike')">试客秀管理后台</el-link>
              <el-link class="margin-left-sm text15" type="warning" @click="showProjectDetail('xiuka')">秀咖用户端</el-link>
              <el-link class="margin-left-sm text15" type="warning" @click="showProjectDetail('shequ')">智慧社区</el-link>
            </div>
          </div>
          <div>离职原因：初创公司，灰色边缘性业务，受到各平台打压管控，最终解散倒闭。</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="Fifth">
import { reactive } from 'vue'
defineProps({
  count: {
    type: Number
  },
});
// 注册事件
const emit = defineEmits(['showProject'])
// 点击事件
const showProjectDetail = (type: string) => {
  emit('showProject', type)
}
const textArr = reactive([
  { text: '民生在勤，', checked: false },
  { text: '勤则不匮。', checked: false },
  { text: '勤劳一日，', checked: false },
  { text: '可得一夜安眠；', checked: false },
  { text: '勤劳一生，', checked: false },
  { text: '可得幸福长眠。', checked: false }
])
</script>

<style scoped>
.family {
  letter-spacing: 1px;
  line-height: 1.5;
  font-family: 'KaiTi', sans-serif;
}

.sphere {
  min-width: 130px;
  min-height: 130px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 3px 3px 3px 3px rgba(10, 10, 10, .2);
}

.square {
  position: relative;
  width: 100%;
  padding: 20px;
  border-radius: 10px;
  background-color: rgba(10, 10, 10, .3);
  box-shadow: 6px 5px 5px 5px rgba(10, 10, 10, .3);
}

.square::before {
  position: absolute;
  content: '';
  z-index: 20;
  left: -30px;
  top: 80px;
  border: 15px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 15px solid rgba(10, 10, 10, .3);
}
</style>

三、执行和重置动态效果

在 App.vue 文件中添加监听事件和判断逻辑

<template>
  <div class="app-background" @wheel="handleWheel">
    <!-- 上一页信息 -->
    <div class="absolute" @click="prev" style="top: 50px;">
      <img src="/up.svg" class="logo" alt="Email" />
    </div>

    <el-carousel ref="carousel" height="100vh" trigger="click" direction="vertical" :autoplay="false"
      @change="changeCarousel">
      <el-carousel-item>
        <first :count="count" ref="firstPage" />
      </el-carousel-item>
      <el-carousel-item>
        <second :count="count" />
      </el-carousel-item>
      <el-carousel-item>
        <third :count="count" ref="thirdPage" />
      </el-carousel-item>
      <el-carousel-item>
        <fourth :count="count" ref="fourthPage" />
      </el-carousel-item>
      <el-carousel-item>
        <fifth :count="count" ref="fifthPage" @showProject="showProject" />
      </el-carousel-item>
    </el-carousel>
    <!-- 下一页信息 -->
    <div class="absolute" @click="next" style="bottom: 50px;">
      <img src="/down.svg" class="logo" alt="Email" />
    </div>
    <!-- 项目经验详情 -->
    <el-dialog v-model="showDialog" center>
      <div class="family">
        <div class="text18" style="text-align: center;font-weight: bold;">{{ projectInfo.projectName }}</div>
        <div class="margin-top" style="text-align: center;">
          {{ projectInfo.projectStartTime }} - {{ projectInfo.projectEndTime }}
        </div>
        <div class="flex margin-top">
          <div style="min-width: 100px;">项目描述：</div>
          <div>{{ projectInfo.projectDescription }}</div>
        </div>
        <div class="flex margin-top">
          <div style="min-width: 100px;">项目职责：</div>
          <div>{{ projectInfo.projectDuty }}</div>
        </div>
        <div class="flex margin-top">
          <div style="min-width: 100px;">技术栈：</div>
          <div>{{ projectInfo.projectStack }}</div>
        </div>
        <div class="flex margin-top" v-if="projectInfo.projectOnline">
          <div style="min-width: 100px;">线上地址：</div>
          <el-link :href="projectInfo.projectOnline" target="_blank">
            {{ projectInfo.projectOnline }}
          </el-link>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import first from './components/First.vue'
import second from './components/Second.vue'
import third from './components/Third.vue'
import fourth from './components/Fourth.vue'
import fifth from './components/Fifth.vue'
import project from './utils/Project.ts' // 引入数据
import { ref } from 'vue'
const showDialog = ref(false)
const projectInfo = ref(project['center'])
const count = ref(0)
const firstPage = ref()
const thirdPage = ref()
const fourthPage = ref()
const fifthPage = ref()
const carousel = ref()
// 获取默认项目经验数据
const showProject = (value: any) => {
  if (project[value]) {
    projectInfo.value = project[value]
    showDialog.value = true
  }
}

// 上一页
const prev = () => {
  carousel.value.prev()
}

// 下一页
const next = () => {
  carousel.value.next()
}

let timer: any = null
const handleWheel = (e: any) => {
  if (showDialog.value) return
  let lock: Boolean = !timer;
  if (lock) {
    if (e.deltaY > 0) {
      next()
    } else if (e.deltaY < 0) {
      prev()
    }
    timer = setTimeout(() => {
      timer = null;
    }, 500);
  }
}

const handleKeyDown = (event: any) => {
  if (showDialog.value) return
  let lock: Boolean = !timer;
  if (lock) {
    if (event.key === 'ArrowUp') { prev() }
    else if (event.key === 'ArrowDown') { next() }
    timer = setTimeout(() => {
      timer = null;
    }, 500);
  }
}
// 监听键盘触发事件
document.addEventListener('keydown', handleKeyDown);

// 监听切换事件，重置和触发动态效果
const changeCarousel = (value: any) => {
  count.value = value
  if (value === 0) {
    firstPage.value.resetArr()
  } else if (value === 2) {
    thirdPage.value.resetArr()
  } else if (value === 3) {
    fourthPage.value.resetArr()
  } else if (value === 4) {
    fifthPage.value.resetArr()
  }
}

</script>

<style scoped>
.app-background {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url('./assets/bgBig.png');
  background-repeat: no-repeat;
  background-position: center 0;
  background-size: cover;
}

.el-carousel__item {
  min-height: 100vh;
  background-color: rgba(10, 10, 10, 0.3);
}

::v-deep(.el-dialog) {
  background-color: rgb(250, 235, 215);
  animation: jackInTheBox;
  animation-duration: 1.5s;
}

.absolute {
  position: absolute;
  z-index: 10;
  left: calc(50% - 14px);
  opacity: .25;
  transition: all .4s linear 0s;
}

.absolute:hover {
  transform: scale(1.18);
  opacity: .85;
}

.logo {
  width: 28px;
  height: 28px;
}
</style>
=> To Be Continued
点赞 评论 收藏 ~~ 留言讨论，如有错误，也希望大家不吝指出。 ~~ 点赞 评论 收藏
shaoin_2
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【Unity基础】4.动画Animation
Lampard的博客
09-17 2320
创建第一个unity动画~
UnityVR--组件6--Animation动画
唐小墨同学的博客
06-07 2307
本篇使用的API：Animation、Animator以及Animator类中的SetFloat、SetInteger、SetBool等，以及短小动画片段的制作
Unity -- Animation（旧版动画组件）和Animator(新版动画器组件)
qq_51947882的博客
08-25 4664
首先起始帧时游戏物体的坐标是（0，0，0），结尾帧时游戏物体的坐标是（10，0，0）--这就是一个位置变化了，然后动画制作器会自动帮我们生成从（0，0，0）到（10，0，0）的动作变化了 --- 注意这里只模拟起点和终点连线上的简单动画。这个的意思是让我们创建一个动画片段文件来存储我们在动画制作窗口中创建的动画 ，创建好动画文件之后，我们在动画制作器的框中选择添加属性（我们要制作的动画就是通过修改属性参数值然后让游戏物体运动，以此获得动画片段）（那么如何判断有没有被渲染呢？...
各种动画效果
zhenghaikun的专栏
01-03 358
#define IMAGE1 @"01.jpg" #define IMAGE2 @"02.jpg" #define DURATION 0.7f //设置运动时间 @interface MainViewController () @property (nonatomic, assign) int subtype;//枚举下标 @end typedef enum : NSU
HTML中淡入的动画效果,CSS3实现页面淡入动画特效代码
weixin_30937427的博客
06-03 735
现在的css3有很多效果可以直接替换flash了，下面我来给大家介绍一个利用CSS3实现页面淡入动画特效代码，希望此教程 对各位同学会有所帮助。利用CSS3动画属性“@keyframes ”可实现一些动态特效，具体语法和参数可以网上自行学习，这篇文章主要是实践应用一下这个动画属性，实现页面淡入特效，实际效果可以看本博客。淡入代码： 代码如下 复制代码@keyframes fade-in {0%...
动画包_animation动画效果_源码
10-04
从CSDN看到大神的操作，借鉴了一下，运用出色的animation动画技术，实现动态生成
简单谈谈Core Animation 动画效果
08-30
下面小编就为大家带来一篇简单谈谈Core Animation 动画效果。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Jquery如何使用animation动画效果改变背景色
10-15
主要介绍了Jquery如何使用animation动画效果改变背景色,需要的朋友可以参考下
Unity中Animator动态添加AnimationClip-附件资源
03-05
Unity中Animator动态添加AnimationClip-附件资源
纯css3 animation属性圆形动态时钟特效
11-08
纯css3 animation属性圆形动态时钟特效 纯css3 animation属性圆形动态时钟特效 纯css3 animation属性圆形动态时钟特效
Unity用Animation组件制作简单的动画
qq_40629631的博客
12-15 1万+
游戏中经常会出现动态提示，例如提示当前金钱不足，一般会从屏幕中央弹出，然后缓慢的向上飘去。 今天游戏项目中遇到了这么个要求，以前做过几次，但总是会忘记，而且随着unity版本更新，新版本总有些莫名其妙的坑，今天写个文章记录一下。 首先用到的组件是Animation，这个组件可以制作动画。 先创建一个文件夹，添加一个Animation。 然后创建一个提示框文本，添加上Animation组件。 然后将刚才创建的Animation拖上去。 注意：在project面板下点击Animation组件是无法添加动画的
css3特效样式库
anda9128的博客
04-20 629
直接调用样式类即可： 1 /* animation */ 2 .a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease;} ...
Unity——Animation
m0_51743362的博客
03-15 1万+
Animation：老版动画 1.Unity对老板Animation动画支持越来越弱，推荐使用Animator 2.编辑Animation动画 ：预览动画 ：动画录制，录制出来的动画就是物体的动画 ：返回到第一帧 ：返回到上一帧 ：开始播放 ：运行到下一帧 ：运行到最后一帧 ：添加关键帧 ：添加帧事件 ：添加编辑的属性 ：关键帧模式显示 ：曲线模式显示 3.Animation组件： ...
Animation 组件
zz_coding
03-25 1618
Animation概述 Animation 组件，Animation类 //测试的结果是： //1、特别注意 XXQueue 这样的函数，如果遇到循环播放的动画 WrapMode.Loop ， 因为默认情况 QueueMode.CompleteOthers，所以无法切换到其他动画 //2、如果将动画队列模式设为 QueueMode.PlayNow，那么即使是 循环播放的动画，它也会自...
八、Animation——淡入淡出动画效果
soldierluo的专栏
11-23 6460
使用Animation控件，可以制造出各种漂亮的动画效果，使用户在操作时有良好的视觉体验。 举例如下：1.       添加一个ScriptManage控件2.       添加一段div如下：            ddddddddddddddddddddddddddddddddddddddddddddddddddddddd        dddddddddddddd
animation漂浮、呼吸、渐变、滚动（带效果图）
SANJIN0527_的博客
01-22 1383
1、使用@keyframes规则定义动画 如： @keyframes float-vertical { 0% { transform: translate3d(0, 0%, 0); } 25% { transform: translate3d(0, 5%, 0); } 75% { transform: translate3d(0, -5%, 0); } 100% { transform: translate3d(0, 0%, 0); }
animate 添加入场动画
stayreal_OAOA
07-15 1362
屏幕滚动到此处，div添加动画效果。 <div class="anim anim-2" > </div> $(function(){ // 出场动画 var anim = $(".anim"); setTimeout(function(){//规避页面加载不完整高度获取异常 $(window).scroll(function() { ...
Unity3d 浅析Animation与Animator组件[小白篇]
热门推荐
Cici_coach的博客
12-12 2万+
Unity3d 浅析Animation与Animator组件[小白篇]    今天小编为大家浅析一下Animation与Animator组件之间的关系，其实对于刚刚开始学习unity3d的童鞋来说，总是搞不清楚Animation与Animator组件之间的关系，对它的概念也是很模糊的。所以在这里，我们可以一起深入探索一下它们的关系。   同时欢迎大家加群：575561285 一起交流分享U
Animation组件的使用
成长ing中的w的专栏
09-23 1060
/** * Author:W * 动画组件Animation的使用 */ cc.Class({ extends: cc.Component, properties: { }, // LIFE-CYCLE CALLBACKS: onLoad () { this.anim = this.getComponent(cc.Animation); //动画状态事件回调注册 this.anim.on(
echarts动态效果
最新发布
09-18
通过在ECharts配置项中设置animation属性，可以为echarts添加动态效果。具体可以通过以下步骤实现： 1. 在初始化echarts实例时，设置animation属性为true或者'auto'，启用默认的加载动画效果。例如：`option = { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

shaoin_2

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值