一篇搞定H5直播中的小动画，评论/点赞/关注/抽奖
站长
· 阅读数 54
直播端尤其是观众端，交互众多，动画显得尤为重要，疯狂地点赞、评论，促进用户关注直播间，以及与抽奖的联动，提高用户留存率和转化率。
一、点赞动画
点赞是直播间很重要的交互，通过诱导用户疯狂点赞来增加与直播间的交互，更能留住用户
效果示例
原理
- 1、点击点赞按钮时，点赞效果图片曲线移动，可以用正弦函数描述（X:正弦函数/Y:匀速增加）；
- 2、图片先变大再变小；
- 3、透明度0->1->0;
- 4、连续点赞图片随机方向，不重叠
实现
我们先实现1个图片的曲线运动
1、css实现
图片沿曲线运动，最容易想到的就是svg中的animateMotion，沿运动路径位移
用法：
<animateMotion path="" dur="" repeatCount="" path="" begin=""/>
属性:
path: 此属性定义运动的路径。keyPoints: 此属性表示在[0，1]范围内，每个keyTimes关联值的对象在路径中的距离。rotate:此属性定义应用于沿路径动画的元素的旋转，通常是使其指向动画的方向。repeatCount:重复次数，默认为1次，indefinite无限循环。dur:持续时长。begin:开始方式。 因此，生成一段曲线的path，使图片沿着该path运动即可，可以借助Adobe Illustrator来生成一段曲线并拿到path路径。（路径随便画的）然后 存储为->选择svg格式->查看svg代码
得到这样一段代码
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 595.28 841.89" enable-background="new 0 0 595.28 841.89" xml:space="preserve">
<circle fill="#DCAB7F" cx="299.9" cy="725.24" r="35.44"/>
<path fill="none" stroke="#050101" stroke-miterlimit="10" d="M299.9,725.24c0-38.27-97.48-32.52-92.42-111
c5.06-78.48,36.73-81.01,92.42-105.06s122.77,0,124.04-97.47c1.27-97.47-92.38-87.34-124.04-94.94s-113.94,2.53-126.59-75.95
C160.65,162.34,299.9,100.69,299.9,80.02c0-26.6,0,26.6,0,0"/>
</svg>
path里面的路径就是图片的运动轨迹
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 595.28 841.89" enable-background="new 0 0 595.28 841.89" xml:space="preserve">
<circle fill="#DCAB7F" cx="0" cy="0" r="35.44">
<animateMotion path="M299.9,725.24c0-38.27-97.48-32.52-92.42-111
c5.06-78.48,36.73-81.01,92.42-105.06s122.77,0,124.04-97.47c1.27-97.47-92.38-87.34-124.04-94.94s-113.94,2.53-126.59-75.95
C160.65,162.34,299.9,100.69,299.9,80.02c0-26.6,0,26.6,0,0" dur="5s" repeatCount="1" begin="1s"/>
</circle>
</svg>
再加入css动画来控制大小和透明度的变化即可，但使用css的弊端是，多次点赞时需要生成多个dom，在动画结束后需要及时清除这些dom，否则容易造成性能问题。
2、canvas动画
对于图片随机/开始运动方向随机，运用js肯定是最好的，使用canvas渲染能更好满足细节需求
- 新建canvas画布
<canvas id="thumbsCanvas" width="200" height="400"></canvas>
<button onclick="handleThumbsUp()">点赞</button>
- 渲染图片
var thumbsCanvas=document.getElementById('thumbsCanvas'),
ctx=thumbsCanvas.getContext('2d'),
w=thumbsCanvas.width,
h=thumbsCanvas.height,
img=new Image();
img.src="https://cdn.bfonline.com/scrm/heathH5/live/thumbsup1.png"
var imgX=w/2;
var imgY=h;
img.onload=function(){
imgX=w/2-img.width/6;
imgY=h-img.height/3;
ctx.drawImage(img,w/2-img.width/6,h-img.height/3,img.width/3,img.height/3)
}
- 添加动画
function trans(){
ctx.clearRect(imgX,imgY,img.width/3,img.height/3);//擦除之前画的图片
imgY-=1;//掉落速度可调节
ctx.drawImage(img,imgX,imgY,img.width/3,img.height/3);//重新画
if(imgY>0){
window.requestAnimationFrame(trans)
}
}
function handleThumbsUp(){
trans();
}
- 添加曲线效果，即imgX也添加变化，我们想要图片左右摆动，正好可以借鉴正弦函数，但如果只是简单的
imgX=Math.sin(imgY)，那么只会得到一个左右摇摆上升的效果。因此需要借助正弦函数解析式y=Asin(wx+φ)+b（死去的高中回忆开始攻击我）,通过改变A/ω/φ/b的值，得到一条比较舒服的上升曲线。
A ：决定峰值（即纵向拉伸压缩的倍数）
ω ：决定周期
φ ：决定波形与X轴位置关系或横向移动距离（左加右减）
b ：表示波形在Y轴的位置关系或纵向移动距离（上加下减）
onMounted(() => {
nextTick(() => {
thumbsUpAni = new ThumbsUpAni();
});
});
function getRandom(min, max) {
return min + Math.floor(Math.random() * (max - min + 1));
}
class ThumbsUpAni {
imgsList = [];
context;
width = 0;
height = 0;
scanning = false;
renderList = [];
scaleTime = 0.1; // 百分比
constructor() {
this.loadImages();
const canvas = document.getElementById("likeCanvas");
this.context = canvas.getContext("2d");
this.width = canvas.width;
this.height = canvas.height;
}
loadImages() {
const images = [
"thumbsup1.png",
"thumbsup2.png",
"thumbsup3.png",
"thumbsup4.png",
"thumbsup5.png",
];
const promiseAll = [];
images.forEach((src) => {
const p = new Promise(function (resolve) {
const img = new Image();
img.onerror = img.onload = resolve.bind(null, img);
img.src = "https://cdn.bfonline.com/scrm/heathH5/live/" + src;
});
promiseAll.push(p);
});
Promise.all(promiseAll).then((imgsList) => {
this.imgsList = imgsList.filter((d) => {
if (d && d.width > 0) return true;
return false;
});
// if (this.imgsList.length == 0) {
// dLog('error', 'imgsList load all error');
// return;
// }
});
}
createRender() {
if (this.imgsList.length == 0) return null;
const basicScale = [0.6, 0.9, 1][getRandom(0, 2)];
const getScale = (diffTime) => {
if (diffTime < this.scaleTime) {
return +(diffTime / this.scaleTime).toFixed(2) * basicScale;
} else {
return basicScale;
}
};
const context = this.context;
// 随机读取一个图片来渲染
const image = this.imgsList[getRandom(0, this.imgsList.length - 1)];
const offset = 20;
const basicX = this.width / 2 + getRandom(-offset, offset);
const angle = getRandom(2, 10);
let ratio = getRandom(5, 40) * (getRandom(0, 1) ? 1 : -1);
const getTranslateX = (diffTime) => {
if (diffTime < this.scaleTime) {
// 放大期间，不进行摇摆位移
return basicX;
} else {
return basicX + ratio * Math.sin(angle * (diffTime - this.scaleTime));
}
};
const getTranslateY = (diffTime) => {
return (
image.height / 2 + (this.height - image.height / 2) * (1 - diffTime)
);
};
const fadeOutStage = getRandom(14, 18) / 100;
const getAlpha = (diffTime) => {
let left = 1 - +diffTime;
if (left > fadeOutStage) {
return 1;
} else {
return 1 - +((fadeOutStage - left) / fadeOutStage).toFixed(2);
}
};
return (diffTime) => {
// 差值满了，即结束了 0 ---》 1
if (diffTime >= 1) return true;
context.save();
const scale = getScale(diffTime);
// const rotate = getRotate();
const translateX = getTranslateX(diffTime);
const translateY = getTranslateY(diffTime);
context.translate(translateX, translateY);
context.scale(scale, scale);
// context.rotate(rotate * Math.PI / 180);
context.globalAlpha = getAlpha(diffTime);
context.drawImage(
image,
-10,
-image.height / 2,
image.width / 2,
image.height / 2
);
context.restore();
};
}
scan() {
this.context.clearRect(0, 0, this.width, this.height);
this.context.fillStyle = "rgba(0,0,0,0)";
this.context.fillRect(0, 0, 200, 400);
let index = 0;
let length = this.renderList.length;
if (length > 0) {
requestFrame(this.scan.bind(this));
this.scanning = true;
} else {
this.scanning = false;
}
while (index < length) {
const child = this.renderList[index];
if (
!child ||
!child.render ||
child.render.call(null, (Date.now() - child.timestamp) / child.duration)
) {
// 结束了，删除该动画
this.renderList.splice(index, 1);
length--;
} else {
// continue
index++;
}
}
}
start() {
const render = this.createRender();
const duration = getRandom(1500, 3000);
this.renderList.push({
render,
duration,
timestamp: Date.now(),
});
if (!this.scanning) {
this.scanning = true;
requestFrame(this.scan.bind(this));
}
return this;
}
}
function requestFrame(cb) {
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
}
)(cb);
}
二、关注动画
关注动画最重要的就是✓的描绘，这里用到的依旧是svg的描边动画。
- 原理
stroke 系列属性主要与边有关比如：stroke 边的颜色；stroke-width 边的粗细stroke-linecap 边起始与终点的形状；stroke-linejoin 边折角时的形状；
而描边动画主要与以下两个属性有关：stroke-dasharray 和 stroke-dashoffset。
stroke-dasharray 该属性控制路径中虚线的长度以及虚线间的距离;
stroke-dashoffset 该属性指定了虚线开始时的偏移长度，正数从路径起始点向前偏移，负数则向后;
<svg width="600px" height="300px" viewBox="0 0 600 100">
<line x1="20" y1="20" x2="500" y2="20" style="stroke: black;"/>
</svg>
一条线
加入stroke-dasharray，成为一条虚线
<svg width="600px" height="300px" viewBox="0 0 600 100">
<line x1="20" y1="20" x2="500" y2="20" stroke-dasharray='20' style="stroke: black;"/>
</svg>
stroke-dasharray='20'
stroke-dasharray='20 60'
stroke-dasharray='20 40 60'
stroke-dashoffset为虚线偏移长度
<svg width="600px" height="300px" viewBox="0 0 600 100">
<line x1="20" y1="20" x2="500" y2="20" stroke-dasharray='20' stroke-dashoffset='10' style="stroke: black;"/>
</svg>
虚线段仍为20，但向左偏移10
如果把stroke-dashoffset='10'用在动画中
<svg width="600px" height="300px" viewBox="0 0 600 100">
<line x1="20" y1="20" x2="500" y2="20" stroke-dasharray='20' stroke-dashoffset="10" style="stroke: black;">
<animate sttributeType="CSS" attributeName="stroke-dashoffset" begin="0s" from="120" to="-120" dur="2" fill="freeze" repeatCount="indefinite"></animate>
</line>
</svg>
如果将stroke-dasharray长度放大至正好为直线的长度，就会得到一条渐隐或者逐渐出现的线，这就是svg的描边动画。
<svg width="600px" height="300px" viewBox="0 0 600 100">
<line x1="20" y1="20" x2="500" y2="20" stroke-dasharray='480' stroke-dashoffset="480" style="stroke: black;">
<animate sttributeType="CSS" attributeName="stroke-dashoffset" begin="0s" from="480" to="-480" dur="2" fill="freeze" repeatCount="indefinite"></animate>
</line>
</svg>
- 实现
关注动画，我们要描的是
✓，可以使用js的getTotalLength()方法获取path的路径总长度
<svg viewBox="0 0 400 400" width="30" height="30">
<polyline id="followCheck"
fill="none"
stroke="#ffffff"
stroke-width="24"
points="88,214 173,284 304,138"
stroke-linecap="round"
stroke-linejoin="round"
></polyline>
</svg>
css
#followCheck {
stroke-dasharray: 350;
stroke-dashoffset: 0;
animation: check 1s ease-out forwards;
transform-origin: center;
}
@keyframes check {
0% {
stroke-dashoffset: 350;
transform: scale(1);
}
60% {
stroke-dashoffset: 0;
transform: scale(1);
}
100% {
stroke-dashoffset: 0;
transform: scale(0.8);
}
}
三、抽奖倒计时
举一反三，依旧可以将描边动画运用到抽奖的圆环倒计时中
<svg class="cir_svg" width="100px" height="100px" viewbox="0,0,100,100">
<circle id="lottery_circle" cy="51" cx="50" r="47" stroke="#fff000" fill="none" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-dasharray="300" stroke-dashoffset="-300">
<animate
sttributeType="CSS"
attributeName="stroke-dashoffset"
begin="0s"
from="0"
to="300"
dur="5s"
fill="freeze"
repeatCount="1"
></animate>
</circle>
</svg>
四、评论滚动动画
评论动画，需要每一条新的评论向上滚动，当用户滚动翻看下方消息时，底部出现新增条数
- 评论动画&n条消息 html
<div class="chatWrapper" ref="chatWrapperRef">
<ul class="chatList flex-ssl" ref="chatListRef">
<li
class="chatList_li fw-b"
v-for="(item, index) in chatList"
:key="index"
:id="`chatItem${item.comment_id}`"
>
<span :class="item.role == 'AUDIENCE' ? '' : 'colorHost'"
>{{ item.role == "AUDIENCE" ? item.user_name : "主播" }}：</span
>
<span>{{ item.comment }}</span>
</li>
</ul>
</div>
<div
class="newChat mt-8"
v-show="isRestVisiable && restComment > 0"
@click="handlerScrollBottom"
>
{{ restComment }}条消息 <i class="icon-chakangengduo"></i>
</div>
js，每当有一条新的消息，就将其添加入queue()中
// 聊天记录加入队列
const queue = async (data) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
addComment(data);
resolve();
}, 500);
});
};
function addComment(data) {
chatList.value.push(data);
nextTick(() => {
renderComment();
});
}
function addScroll() {
__.m.debounce(listScroll, 200);
isRestVisiable.value = true;
}
function listScroll() {
const ele = chatWrapperRef.value;
const isBottom = isScrollBottom(ele, ele.clientHeight);
if (isBottom) {
isRestVisiable.value = false;
restNums.value = 0;
restComment.value = 0;
}
}
function isScrollBottom(ele, wrapHeight, threshold = 30) {
const h1 = ele.scrollHeight - ele.scrollTop;
const h2 = wrapHeight + threshold;
const isBottom = h1 <= h2;
return isBottom;
}
// 滚动到最底部
function handlerScrollBottom() {
restNums.value = 0; // 清除剩余消息
restComment.value = restNums.value;
isRestVisiable.value = false;
chatWrapperRef.value.removeEventListener("scroll", addScroll);
chatWrapperRef.value.scrollTo({
top: chatListRef.value.offsetHeight,
left: 0,
behavior: "smooth",
});
}
function renderComment() {
const listHight = chatListRef.value.offsetHeight;
const diff = listHight - chatWrapperRef.value.offsetHeight; // 列表高度与容器高度差值
const top = chatWrapperRef.value.scrollTop; // 列表滚动高度
if (diff - top < 50) {
if (diff > 0) {
if (isRestVisiable.value) {
isRestVisiable.value = false;
chatWrapperRef.value.removeEventListener("scroll", addScroll);
}
chatWrapperRef.value.scrollTo({
top: diff + 10,
left: 0,
behavior: "smooth",
});
restNums.value = 0;
}
} else {
++restNums.value;
if (!isRestVisiable.value) {
isRestVisiable.value = true;
chatWrapperRef.value.addEventListener("scroll", addScroll);
}
}
restComment.value = restNums.value >= 99 ? "99+" : restNums.value;
}
- 滑动至@ html
<div class="newChat" @click="handleScrollToAt" v-show="isAtVisiable">
有人@你
</div>
js 使用scrollIntoView()方法
function handleScrollToAt() {
isAtVisiable.value = false;
nextTick(() => {
const scrollItem = document.getElementById(`chatItem${atCommentId.value}`);
if (scrollItem && scrollItem.offsetTop) {
scrollItem.scrollIntoView({
behavior: "smooth",
block: "start",
inline: "nearest",
});
}
});
}
- XXX来了 html
<transition name="newAud">
<div class="comeAudience flex-sc" v-show="isNewVisiable">
<div class="mr-4 elp1 audName">{{ newAudience }}</div>
来了
</div>
</transition>
这里的动画使用的是vue中的过渡效果
@keyframes appear {
0% {
transform: translateX(-200px);
}
100% {
transform: translateX(0px);
}
}
@keyframes disappear {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.newAud-enter-active {
animation: appear 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.newAud-leave-active {
animation: disappear 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
以上为直播间常用的一些动画，涉及到css/svg/canvas，动画实现途径不止一条，本文只提供思路。
转载自:https://juejin.cn/post/7166142204019228702