ULEAD GIF如何制作模糊过渡和透明过渡
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ULEAD GIF如何制作模糊过渡和透明过渡相关的知识，希望对你有一定的参考价值。
RT，就是切换图片的时候怎么透明过度或者用毛玻璃那样渐渐模糊的过渡？
参考视频演示http://www.56.com/u30/v_NTA3MDE2NTk.htmlulead gif Animator 5过渡帧的菜单是 帧》在...中间（快捷键是Ctrl+T) 工具在界面的底下位置。 参考技术A 用个处理软件就可以
40 Vue3制作动画过渡效果
阐述
有了39节内容的学习，本节我们在它的基础上用Vue的内置组件，制作过渡效果。需求很简单，还是DOM元素的显示和隐藏，但不在是滑入效果，而是慢慢改变透明度 opacity。
准备基础文件
去掉关键帧 keyframes 样式，但保留 v-enter-active 和 v-leave-active。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
<style>
.v-enter-active
animation: comein 1s;
.v-leave-active
animation : comeout 1s;
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp(
data()
return
isShow:false
,
methods:
hanldClick()
this.isShow= !this.isShow
,
template: `
<transition>
<div v-if="isShow">demo示例</div>
</transition>
<div><button @click="hanldClick">切换动画</button></div>
`
)
const vm = app.mount("#app")
</script>
这时候的代码是没有任何过渡效果的，但是依然可以切换显示与隐藏效果。
增加过渡效果
上节我们说了 v-enter-active 和 v-leave-active 都是固定写法，但是我们需要告诉它执行的过渡效果是什么样子的，这样我们就需要再写两个固定的css样式，v-enter-from 和v-enter-to。
这两个样式就是控制进入前DOM的样式和进入完成时DOM的样子的。
<style>
.v-enter-from
opacity: 0;
.v-enter-to
opacity: 1;
.v-enter-active
transition: opacity 3s ease-out;
</style>
这时候到浏览器中预览一下，就有了进入时的透明度过渡效果。
但现在隐藏时是没有效果的，我们还需要制作一个隐藏效果。
这时候也是两个固定的CSS选择器 v-leave-from 和 v-leave-to，然后再编写离开时的执行效果 v-leave-active。
<style>
.v-leave-active
transition: opacity 3s ease-out;
.v-leave-from
opacity: 1;
.v-leave-to
opacity: 0;
</style>
写完这些 CSS样式，隐藏时就也有了动画效果。
目前这段CSS代码还是比较冗余的，我们可以简化一下。简化的原则就是把一样的值的选择器合并到一期，就得到了下面这样的代码。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
<style>
.v-enter-from , .v-leave-to
opacity: 0;
.v-enter-to , .v-leave-from
opacity: 1;
.v-enter-active , .v-leave-active
transition: opacity 3s ease-out;
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp(
data()
return
isShow:false
,
methods:
hanldClick()
this.isShow= !this.isShow
,
template: `
<transition>
<div v-if="isShow">demo示例</div>
</transition>
<div><button @click="hanldClick">切换动画</button></div>
`
)
const vm = app.mount("#app")
</script>
最后预览一下，效果还是可以实现的。
总结
本文我们主要学习了Vue过渡效果的制作。
通过两节的学习你也可以大概知道Vue动画和过渡效果的套路了，就是利用固定的选择器，然后配合<transition>标签来现实。
以上是关于ULEAD GIF如何制作模糊过渡和透明过渡的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 CSS3 更改具有不透明度过渡的图像以响应 onClick 事件？