中国开源软件网

当前位置: 首页 > 互联网 >

300,其它代码省略,8.0,的,炸,裂,特效

时间:2021-01-27 23:18来源:互联网 作者:小狐

border-radius: 8px;background-color: white;box-shadow: var(--shadow-medium)padding: 6px12px;font-size: 24px。

position: absolute;top: calc(-100% - 18px)width: 300px;opacity: 0。

这段代码的含义是:

弹出层使用 grid 布局,repeat(auto-fill, 24px) 指的是在宽度允许的条件下,在一行中尽可能放置最多的列元素,每列的宽度固定为 24px。设置列间距为 18px。

定位设置为绝对定位,把它向上移动 包含元素高度(也就是 .chooseSticker 的高度)的 100% 并减去 18px,调整到合适的位置。宽度设置为 300px,透明度设置为 0 把它隐藏。

输入框和按钮的样式比较简单,输入框的宽度占满整列,发送按钮使用justify-self: end把自己进行靠右对齐。这里把代码一次性贴出来:

.messageInput{box-shadow: var(--shadow-medium)padding: 0px12px;border-radius: 8px;width: 100%;}.send{height: 100%;width: 90%;border-radius: 8px;justify-self: end;color: white;background-color: var(--inverse-color)}

.show{opacity: 1;}

3. JS 部分

在给聊天界面加上功能之前,先编写一些基础的 JS 代码。在项目根目录创建一个 index.js 文件,并在 index.html 中引用,注意放到

关闭标签的上方,这样当 HTML DOM 加载完成之后才会执行 js 中的代码,防止找不到元素:

< body>< src= “index.js”> > body>

在 index.js 中,先获取要操作的 DOM 元素:

constpanelEle = document.querySelector “.panel”;constchooseStickerBtn = document.querySelector “.chooseSticker”;conststickersEle = document.querySelector “.stickers”;constmsgInputEle = document.querySelector “.messageInput”;constsendBtn = document.querySelector “.send”。

其中:

panelEle是面板元素,用于追加新。

stickersEle就是弹出的表情选择框。

msgInputEle是输入框。

sendBtn为发送按钮。

< src= “lottie.min.js”> >

接下来看一下各部分功能是怎么实现的。

发送普通

sendBtn.addEventListener( “click” =>{constmsg = msgInputEle.value;if(msg) {appendMsg(msg)}})

在事件处理函数中:

判断用户是否输入了。

如果输入了就追加到列表中。

来看一下appendMsg函数的代码:

function appendMsg( msg, type)// 创建元素constmsgEle = panelEle.(document.( “div”)msgEle.classList. add( “message” “mine”; // 设置为“我“发送的样式msgEle.innerHTML = `

300,其它代码省略,8.0,的,炸,裂,特效(图1)

${msg}

`;// 滚动到最新panelEle.scrollTop = panelEle.scrollHeight;msgInputEle. value=

函数接收两个参数,msg 和 type,分别是要追加的内容和类型,type 为可选的,不传则认为是普通文本,如果传递了 “stickers” 则为表情,现在还用不到它。在这个函数中主要做了下面几件事情:

按照的 HTML 结构创建一个新的元素 msgEle,并追加到列表中。

把的样式设置为我发送的。

内部的元素分别为头像和文本,使用模板字符串的形式赋值给 msgEle 的 innerHTML 属性中,并在

中使用 msg 变量的值。

最后把滚动条滚动到最新的处,并清空输入框中的。

这样就可以发送普通的文本了。

发送动画表情

在发送动画表情之前,需要先加载动画表情。在 index.js 的最上方先定义表情名称和表情动画文件路径的键值对信息:

conststickers = {bomb: {path: “./3145-bomb.json”},pumpkin: {path: “./43215-pumpkins-sticker-4.json”},}。

我们会根据bomb、pumkin这样的 key 来找到对应的动画路径。接着初始化弹出层中的表情以供用户选择:

// 初始化表情面板,也可以在表情选择窗弹出时再初始化Object.keys(stickers).forEach( ( key) =>{constlottieEle = stickersEle.( document.( “span”)// 对每个表情创建 lottie 播放器constplayer = lottie.loadAnimation({container: lottieEle,renderer: “svg”loop: true,autoplay: false,path: stickers【key】.path,})// 当选择表情时,发送,并设置类型为 sticker 表情lottieEle.addEventListener( “click” =>{appendMsg(key, “sticker”;})// 当鼠标划过时,播放动画预览lottieEle.addEventListener( “mouseover” =>{player.play;})// 当鼠标划过时,停止动画预览lottieEle.addEventListener( “mouseleave” =>{player.stop;})})

这里的代码分别作了下边这些操作:

遍历存储表情信息的对象。

创建一个 lottie 的容器,使用 span 元素,因为 lottie 动画的播放器需要挂载到一个具体的 html 元素中。

调用 lottie 的 loadAnimation 加载动画,它需要传递这样几个参数:

container: 播放器要挂载到的容器。

renderer:可以选择是使用 svg 还是 canvas 渲染动画。

loop: 是否循环播放,由于此处是在表情选择弹出层中预览动画,所以支持循环播放。

autoplay:是否自动播放,这里设置为了否,后边让它在鼠标划过时再播放动画。

path:动画 json 文件路径,直接从对象中获取。

loadAnimation 会返回 lottie 的实例,把它保存在 player 中。

后边则注册了几个事件:

当鼠标划过表情时,开始播放动画。

当鼠标划出表情时,停止动画。

chooseStickerBtn.addEventListener “click” =>{stickersEle.classList.toggle “show”;}

元素里添加任何信息:

function appendMsg( msg, type)// ...msgEle.innerHTML = `

300,其它代码省略,8.0,的,炸,裂,特效(图2)

${type === “sticker” msg}

`。

在它的下方,调用 playSticker 函数来播放动画:

// 处理表情,播放相关动画if type=== “sticker” {playStickermsg, msgEle}

functionplaySticker key, msgEle{// 表情,创建 lottie 动画constlottieEle = msgEle.querySelector “span”;lottieEle.style.width = “40px”lottieEle.style.height = “40px”lottie.loadAnimation{container: lottieEle,renderer: “svg”loop: false,autoplay: true,path: stickers【key】.path,}}

在这个函数里主要做了下边几项操作:

获取中的 span 元素,它将作为 lottie 的动画容器。

设置表情动画的宽高为 40px。

使用 lottie 加载动画,并设置循环播放为 false,自动播放为 true,来让表情发送时自动播放动画,且只播放一次。

现在可以发送表情了,相关的动画也会自动播放,接下来看一下怎么实现炸弹的全屏动画和对元素的晃动效果。

发送带全屏特效的表情

对于这种带全屏特效的表情可以单独进行判断,也可以在保存表情的对象中定义相关的操作,这里为了简单起见,我们单独判断用户是否发送了炸弹表情,施加相应特效。

首先在 appendMsg 函数里,进行判断,如果发送的是表情,且表情为炸弹,则播放全屏动画并晃动:

functionappendMsg( msg, type){if( type=== “sticker” {playSticker(msg, msgEle)if(msg === “bomb” {// 播放动画setTimeout( =>{playExplosion(msgEle)}, 800)// 晃动列表shakeMessages;}}}

这里全屏动画延迟了 800 毫秒之后再执行,目的是在炸弹表情播放到合适的时间时,再播放全屏动画,播放动画使用了 playExplosion 函数,并传递了元素进去。在全屏动画结束之后,调用 shakeMessages 来晃动。这里先看一下 playExplosion 函数的代码:

functionplayExplosion anchor{constexplosionAnimeEle = anchor. document. “div”explosionAnimeEle.style.position = “absolute”explosionAnimeEle.style.width = “200px”explosionAnimeEle.style.height = “100px”explosionAnimeEle.style.right = 0;explosionAnimeEle.style.bottom = 0;constexplosionPlayer = lottie.loadAnimation{container: explosionAnimeEle,renderer: “svg”loop: false,autoplay: true,path: “./9990-explosion.json”}explosionPlayer.setSpeed 0.3// 播放完成后,销毁相关的动画和元素explosionPlayer.addEventListener “complete” =>{explosionPlayer.destroy;explosionAnimeEle.remove;}}

playExplosion 函数接收一个 anchor 锚点,就是说基于哪个位置开始播放全屏动画,由于示例中的动画画幅比较小,所以把它固定在了最新发送的的下方,这里动画的 anchor 就是元素,之后函数做了下边的这些操作:

添加全屏动画元素,设置为绝对定位,宽度 200px,高度 100px,放在最新元素的右下角。

加载 lottie 动画,不循环、自动播放。

由于原动画速度过快,这里调用 lottie 实例的 setSpeed 方法,把速度设置为 0.3 倍速。

之后给 lottie 实例设置事件监听:“complete”它会在动画执行完成时触发,里边销毁了 lottie 实例和全屏动画元素。

这样全屏动画的效果就实现了。接下来看晃动的代码:

functionshakeMessages( ){[...panelEle.children].reverse.slice( 0, 5).forEach( ( messageEle) =>{constavatarEle = messageEle.querySelector( "img");constmsgContentEle = messageEle.querySelector( "p");avatarEle.classList.remove( "shake");msgContentEle.classList.remove( "shake");setTimeout( =>{avatarEle.classList.add( "shake");msgContentEle.classList.add( "shake");}, 700);});}

这个函数的操作是:

在循环中,分别给头像和添加 shake class 执行晃动动画,这个 class 的内容稍后再介绍。

要注意的是,在添加 shake class执行动画前,需要先删除 shake,因为有的可能在之前已经晃动过了,例如当连续发了多个炸弹表情时。后边在添加 shake class 时,使用 setTimeout 延迟了 700 毫秒,目的是在全屏动画执行到一定程度时再晃动。

接下来看一下 shake class 的定义,在 style.css 中添加下方代码:

.shake{animation: shake 0.8sease-in-out;}@ keyframesshake {from{transform: translate3d(0, 0px, 0px)}10% {transform: translate3d(6px, -6px, 0px)}20% {transform: translate3d(-5px, 5px, 0px)}30% {transform: translate3d(4px, -4px, 0px)}35% {transform: translate3d(-3px, 3px, 0px)}39% {transform: translate3d(2px, -2px, 0px)}41% {transform: translate3d(-1px, 1px, 0px)}42% {transform: translate3d(0px, 0px, 0px) rotate(20deg)}52% {transform: rotate(-15deg)}60% {transform: rotate(8deg)}65% {transform: rotate(-3deg)}67% {transform: rotate(1deg)}70% {transform: rotate(0deg)}to{transform: translate3d(0px, 0px, 0px) rotate(0)}}

.shake中使用了 shake keyframes 定义的动画,执行时间为 0.8s,动画执行函数为 ease-in-out。Keyframes 里的代码比较多,但是都是很简单的,就是模拟了时的效果,移动 x 轴和 y 轴的偏移,每次的偏移幅度越来越小,并且越来越快,可以看到百分间隔越来越小。在动画进行到 42% 的时候,加了一些旋转动画,这样就有了落地时的震动效果。由于使用 rotate 旋转时的轴心在元素中间,我们可以把气泡的轴心修改一下来实现更真实的效果:

.messagep{transform-origin: left bottom;}.message.minep{transform-origin: right bottom;}

这里把对方发送的的轴心设置在左下角,自己发送的则设置在了右下角。

总结

现在,这个模拟.0 动画表情的功能就实现了。主要就是下边几点:

使用 lottie 库加载并播放动画。

确定全屏动画的位置和播放时机。

晃动动画的 CSS 实现。

程序员如何避免陷入“内卷”选择什么技术最有前景,中国者现状与技术趋势究竟是什么样?快来参与「2020 中国者大调查」更有丰富奖品送不停!

本文相关词条概念解析:

动画

动画的概念不同于一般意义上的动画片,动画是一种综合艺术,它是集合了绘画、漫画、电影、文学等众多艺术门类于一身的艺术表现形式。最早发源于19世纪上半叶的英国,兴盛于美国,中国动画起源于20世纪20年代。动画是一门年青的艺术,它是唯一有确定诞生日期的一门艺术,1892年10月28日埃米尔·雷诺首次在巴黎著名的葛莱凡蜡像馆向观众放映光学影戏,标志着动画的正式诞生,同时埃米尔·雷诺也被誉为“动画之父”。动画艺术经过了100多年的发展,已经有了较为完善的理论体系和产业体系,并以其独特的艺术魅力深受人们的喜爱。动画的英文有很多表述,如animation、cartoon、animatedcartoon、cameracature。其中较正式的"Animation"一词源自于拉丁文字根anima,意思为“灵魂”,动词animate是“赋予生命”的意思,引申为使某物活起来的意思。所以动画可以定义为使用绘画的手法,创造生命运动的艺术。动画技术较规范的定义是采用逐帧拍摄对象并连续播放而形成运动的影像技术。不论拍摄对象是什么,只要它的拍摄方式是采用的逐格方式,观看时连续播放形成了活动影像,它就是动画。

网友评论

相关文章