前言:
现在你们对“css设置缓动效果”可能比较着重,咱们都想要学习一些“css设置缓动效果”的相关资讯。那么小编也在网摘上收集了一些对于“css设置缓动效果””的相关文章,希望姐妹们能喜欢,同学们一起来学习一下吧!CSS 里有个 transition 属性,可以做出各种好看的动画效果,里面就用到了缓动函数。各种动画软件里基本上也是必备的。
Python 也有现成的库,而且还有函数的源码,想了解缓动原理的不妨看看。
我写了个演示程序,方便自己将来查看,有用得到的同学也可以收藏一下。
想直接调库,可以
pip install pytweening
源码太长,这里不贴了,可以直接到 github 查看:
缓动效果速查:
用法:
from pytweening import * def get_pos(start_pos,end_pos,time_scale,func='linear'): '''根据起点和终点,时间比例,缓动函数获取当前坐标点''' func = eval(func) pos_scale = func(time_scale) x1,y1 = start_pos x2,y2 = end_pos return getPointOnLine(x1,y1,x2,y2,pos_scale)
演示程序代码(tweening_test.py):
程序主要实现按空格键随机展示缓动效果。
from base import *from pytweening import *import time,randomW,H = 1280,800CENTER = (W//2,H//2)D = 400 # 移动距离# 缓动函数列表funcs = ['easeInBack', 'easeInBounce', 'easeInCirc', 'easeInCubic', 'easeInElastic', 'easeInExpo', 'easeInOutBack', 'easeInOutBounce', 'easeInOutCirc', 'easeInOutCubic', 'easeInOutElastic', 'easeInOutExpo', 'easeInOutQuad', 'easeInOutQuart','easeInOutQuint', 'easeInOutSine', 'easeInQuad', 'easeInQuart', 'easeInQuint','easeInSine', 'easeOutBack', 'easeOutBounce', 'easeOutCirc', 'easeOutCubic', 'easeOutElastic', 'easeOutExpo', 'easeOutQuad', 'easeOutQuart', 'easeOutQuint', 'easeOutSine', 'linear']def get_pos(start_pos,end_pos,time_scale,func='linear'): '''根据起点和终点,时间比例,缓动函数获取当前坐标点''' func = eval(func) pos_scale = func(time_scale) x1,y1 = start_pos x2,y2 = end_pos x,y = getPointOnLine(x1,y1,x2,y2,pos_scale) return x,ydef draw_text(canvas,text,pos,color=(0,100,0)): '''显示文本''' font = pygame.font.Font(None,30) text_surface = font.render(text,True,color) text_rect = text_surface.get_rect() text_rect.center = pos canvas.blit(text_surface,text_rect)class Circle: def __init__(self,pos,r,color=(0,200,0),move_func = 'linear'): self.pos = pos # 圆心坐标 self.r = r self.color = color self.move_func = move_func # 缓动函数 self.move_time = 0.8 # 移动时间(秒) self.moving = False self.move_distance = D # 横向移动距离 self.step = 0 # 步数 def start_move(self): '''开始移动''' self.moving = True self.start_time = time.time() self.end_time = self.start_time + self.move_time self.start_pos = self.pos # 沿着矩形移动 direction = [(1,0),(0,-1),(-1,0),(0,1)][self.step] self.end_pos = self.pos[0] + self.move_distance * direction[0],self.pos[1]+ self.move_distance * direction[1] self.step = (self.step + 1) % 4 def update(self): '''更新圆心坐标''' if self.moving: if time.time() > self.end_time: self.moving = False self.pos = self.end_pos else: time_scale = (time.time() - self.start_time) / self.move_time # 下面就是缓动函数起作用的地方,根据流逝的时间比例,获取当前坐标点 self.pos = get_pos(self.start_pos,self.end_pos,time_scale,func = self.move_func) else: self.start_move() def draw(self,canvas): self.update() pygame.draw.circle(canvas, self.color,self.pos, 20)def setup(): size(W,H)colors = [(200,0,0),(0,200,0),(0,0,200),(200,200,0)]circles = []for i in range(4): pos = [(W/2-D/2,H/2+D/2),(W/2+D/2,H/2+D/2),(W/2+D/2,H/2-D/2),(W/2-D/2,H/2-D/2)][i] # 4个坐标 circle = Circle(pos,20,colors[i],move_func='easeOutBounce') circle.step = i circles.append(circle)def draw(): for event in ctx.events: if event.type == pygame.KEYDOWN: if event.key == K_SPACE: func = random.choice(funcs) for circle in circles: circle.move_func = func ctx.screen.fill((0,0,0,50)) for circle in circles: circle.draw(ctx.screen) # draw_text(ctx.screen,circles[0].move_func,(W-150,H-60)) draw_text(ctx.screen,circles[0].move_func,CENTER)run()
base.py 在我上一篇文章里有,这里不贴出来了。
缓动效果,除了用在位置变化,还可以是直径、角度、颜色、圆角变化等,用好了画面会很生动。
版权声明:
本站文章均来自互联网搜集,如有侵犯您的权益,请联系我们删除,谢谢。
标签: #css设置缓动效果