应用CSS完成照片帧动漫与曲线图健身运动

日期:2021-02-28 类型:科技新闻 

关键词:抠图软件电脑版,在线图片加水印,在线 抠图,在线画图网站,淘宝做图片用什么软件好

全部动漫的基础基本原理全是:在短期内内持续先后展现对应的照片,这样在视觉效果上看起来便是'动'的了。

本文关键来讲1说第4点和第5点。

照片帧动漫

当大家要完成的动漫实际效果较为繁杂,并且开发设计排期较为紧的状况下,用1张gif动图来完成动漫是成本费最低,实际效果也非常好的1种计划方案。例如下面这类动漫实际效果:

 

但是假如大家想让动效在某个情况下中止,隔1段時间后,再从断点刚开始再次播发动效,用gif图就完成不上了。 gif图的动效是沒有方法中止的 。这个情况下,能够考虑到选用照片帧动漫。

照片帧动漫能够看作是:把gif图的基本原理在前端开发用编码完成了1遍。

上面个那个动效,(假定)能够分为100帧,即100张照片,随后用编码操纵100张照片先后显示信息。而且,能够随时在半途中止。

以便节约http恳求,把100张照片生成1张雪碧图,随后用background-position去操纵显示信息哪1张图。强烈推荐1个很非常好的照片转化成专用工具: GKA

我把100张照片转化成了1个垂直的雪碧图。

 

在编码里,只必须升级DOM元素的 background-position 便可完成动漫。

最先第1个点必须留意: background-position 设定的是 情况照片相对DOM元素 的起止部位。

假定DOM元素和照片宽高全是 100 * 200

--- css

#wrapper {
    width: 100px;
    height: 200px;
    background-image: url('雪碧图.png');
    background-size: 100% 10000%; // 有100张图, 100*100
    background-repeat: no-repeat;
}

--- js

var domEl = document.querySelector('#wrapper');
var n; // n:显示信息雪碧图中第几张照片,n >=0 && n<100
domEl.style.backgroundPosition = `0px ${-n*200}px`; // 留意这里是负值

大家只必须用js操纵n的值就行,便可以很非常容易完成 随时实行、中止动效 。

上面的事例中,dom元素宽高是固定不动的,假如不固定不动、要想自融入的话,必须依据照片宽高比,根据 padding-top 来设定dom元素的宽高比。这个情况下,在 background-position 中,也没法应用实际的标值了,必须应用百分比。这里有1个必须留意的地区:

background-position 百分比赋值时,很当然的认为是立即用情况照片宽高乘以百分比便可获得最后偏位量,但实际上并不是的。测算公式以下:

x偏位量 = (元素宽度—情况照片的宽度)*x百分比
y偏位量 = (元素高宽比—情况照片的高宽比)*y百分比
换算1下:

x百分比 = x偏位量 / (元素宽度 - 情况照片宽度)
y百分比 = y偏位量 / (元素高宽比 - 情况照片高宽比)

实际到上面的事例中,便是:

// 假定每张小照片宽度为w, 高宽比为h, 当今必须展现第n张照片,1共有100张图,则
var xPercent = 0;
var yPercent = -hn / (h - 100h) * 100 =  n / 99 * 100;
domEl.style.backgroundPosition = `${xPercent}% ${yPercent}%`;

最后,大家就可以完成照片帧动漫了。自然,假如不必须彻底操纵动漫实际效果,能够不依靠js,立即用css便可。或立即用gif动图就好。

css曲线图健身运动

曲线图健身运动,应用svg,canvas是很非常好的挑选。可是在对曲线图的相对路径不那末严苛规定的情况下,应用svg和canvas也许稍微不便了。能够立即用css来完成1个『看起来是曲线图』的健身运动。以相近抛物线的1个健身运动为例,大约是1个这样的实际效果:

 

位移曲线图上某点的切线便是速率,而速率能够溶解成x轴的速率和y轴的速率。也便是说,上面的健身运动能够溶解成水平方位x轴的健身运动和垂直方位y轴的健身运动。从感官上,可以看出,x轴的健身运动大约是匀速的,而y轴的健身运动是愈来愈快的。

此外,因为健身运动溶解变成两个方位的健身运动,必须两个DOM,各自写动漫,才可以完成最后的实际效果。

--- html

<div class='x-container'>
    <div class='y-container'></div>
</div>

--- css

.x-container {
    width: 50px;
    height: 50px;
    animation: xMove 2s linear;
}
.y-container {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #000;
    animation: yMove 2s cubic-bezier(.98,.03,.91,.77);
}
@keyframes xMove {
    0% {
    }
    100% {
      transform: translateX(400px);
    }
}
@keyframes yMove {
    0% {
    }
    100% {
      transform: translateY(400px);
    }
}

两个方位的健身运动合起来,便是上面的实际效果了。有关 animation 特性中的健身运动曲线图,能够参照下面这个网站:

https://cubic-bezier.com/

要想完成1个不那末严苛的曲线图健身运动,立即应用css animation,也是1个非常好的挑选。

 

上一篇:根据CSS向JS传参的方式 返回下一篇:没有了