龙空技术网

不用羡慕前端,Python 也有自己的缓动函数

哈哈老师的日记 104

前言:

现在你们对“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设置缓动效果