[Lab] ui.animate - sliding in views
Phuket2 last edited by
This is a strange one. Maybe it's suppose to work like this. But if you do v.transform=ui.Transform.scale(-0.1, -0.1), passing both negative numbers it also rotates as well as scales. If one number is not negative then only the scale is done. Strange, maybe some shortcut
for whatever reason, ui.animate does not let you control the various curveease functions that ios has has. Simplicity i guess. Technically you might be able to use objc, the block based animations could be wrapped up to look very similar to ui.animate. Didn't @Webmaster4o add something like that to his ui2 project?
there are a few easing types in ui2 which control the start and end decelerations.
You can also (with ui.animate too) run multiple parallel animations, with different durations to get different effects, though not always repeatable.
If you want to delve deeper, at a low level you could define your own timing function (i think that is called keyframe animation, but might require some low level objc)
@Phuket2 I would have expected that scaling one axis negative makes it flip about that axis, while two axes effective rotates 180 degrees... is that what happens?
Phuket2 last edited by
@JonB 😂😂😂, yes that's what's happening. And different combos produce interesting results. Commercial style animations. I was applying this to a button. But I am still 😂 Because it makes sense to you and not me. Scale, flipping on its axis or rotating depending on combinations of positive and negative numbers is beyond my comprehension. At least for now. I am still trying to get into it. Trying many things
i think you are probably old enough to have used an overhead projector -- scaling negative in one axis flips the sheet over (text reads backwards). Then flipping the other axis (again turn over), you will get text that reads correctly, but is upside down.
so, if you drew some arrows on the sheet
y ^ | +---> x
A scale of -1 in x means the view is flipped like a page in a book, the x axis now points negative relative to the parent)
y ^ | x<---+
note this is now a "left handed" coordinate system. text will be backwards.
Next, keeping x scale negative, make the y scale negative,which flips y
x<---+ | v y
which gets you back to a right handed cordinate system, but which has now been rotated 180 degrees.
Phuket2 last edited by Phuket2
Almost no time to reply today. It was raining friends. I am not sure when ui.animate got a new param, delay. I know has not always been there. But it's a game changer. Easy to present multiple views in a staggered fashion with transform. Also , very useful for controlling subview transformations. Below is crap, but still illustrates the meaning or possibilitys.
''' Pythonista Forum - @Phuket2 ''' import ui, editor from random import choice, randint _colors=['rosybrown', 'antiquewhite', 'lightsteelblue', 'white', 'darkblue', 'darkviolet', 'plum', 'darkcyan', 'blanchedalmond', 'chocolate', 'sienna', 'tomato', 'peachpuff', 'lightyellow', 'bisque', 'aqua', 'oldlace', 'maroon', 'palegreen', 'chartreuse', 'darkturquoise', 'linen', 'magenta', 'lemonchiffon', 'powderblue', 'papayawhip', 'gold', 'khaki', 'lightseagreen', 'darkred', 'floralwhite', 'turquoise', 'mediumspringgreen', 'indianred', 'lightgreen', 'crimson', 'mintcream', 'lavender', 'purple', 'orchid', 'darkslateblue', 'whitesmoke', 'moccasin', 'beige', 'mistyrose', 'dodgerblue', 'hotpink', 'lightcoral', 'goldenrod', 'coral', 'cadetblue', 'black', 'mediumseagreen', 'gainsboro', 'paleturquoise', 'darkgreen', 'darkkhaki'] class Panel(ui.View): def __init__(self, text, *args, **kwargs): self.bg_color = 'cornflowerblue' super().__init__(*args, **kwargs) self.corner_radius = 6 self.make_view(text) def make_view(self, text): lb = ui.Label(name = 'lb', frame = self.frame) lb.text = text lb.font=('Arial Rounded MT Bold', 24) lb.size_to_fit() lb.center = self.bounds.center() self.add_subview(lb) def e(v, t, d, x, y): ''' v = the view to animate t = duration d = delay x = x y = y ''' def a(): v.transform=ui.Transform() def complete(): pass v.transform=ui.Transform.translation(x, y) ui.animate(a, duration = t, delay = d, completion = complete) class MyClass(ui.View): def __init__(self, *args, **kwargs): super().__init__(*args, **kwargs) if __name__ == '__main__': _use_theme = True animated = False w, h = 600, 800 f = (0, 0, w, h) mc = MyClass(frame=f, bg_color='white') if not _use_theme: mc.present('sheet', animated=animated) else: editor.present_themed(mc, theme_name='Cool Glow', style='sheet', animated=False) r = ui.Rect(*mc.bounds).inset(20, 20) r.height = 100 delay = .3 x = choice([-1, 1, 0]) * mc.width y = choice([-1, 1, 0]) * mc.height for i in range(6): p = Panel(str(i),frame = r, bg_color=choice(_colors)) mc.add_subview(p) e(p,.5, delay * (i*(i * .3)), x, y) r.y = r.max_y + 20
tileyon last edited by
You ought to talk to @Webmaster4o, since he's the author of ui2.. even better, post an issue over in github, with specifics of your issue (traceback, and code to reproduce). Since luke is big into unittest, and published a demo using all of the functionality of ui2, I am guessing this is a problem with your code.
abcabc last edited by abcabc
@tileyon I get error in completion parameter of animate.py. The completion parameter in "animate.py" seems to expect function with one parameter but the same in ui.animate expects function with no parameters. I do not know whether you get the same error. Anyway here is the modified code of JonB's example that runs either with animate.py or with ui.animate based on USE_ANIMATE variable. This may help to fix your problem.
import ui import animate USE_ANIMATE = True #USE_ANIMATE = False def shrink(sender): def a(): v.transform=ui.Transform.rotation(-30).concat( ui.Transform.scale(0.1,0.1)).concat(ui.Transform.translation(300,300)) v.alpha=0 def compl(dummy=1): v.hidden=True b2.hidden=False if USE_ANIMATE: animate.animate(a,.5, completion=lambda dummy:compl(dummy)) else: ui.animate(a,.5,completion=compl) def expand(sender): v.transform=ui.Transform.rotation(-30).concat( ui.Transform.scale(0.1,0.1)).concat(ui.Transform.translation(300,300)) v.alpha=0.1 v.hidden=False b2.hidden=True def a(): v.transform=ui.Transform() #default v.alpha=1 def compl(dummy=1): pass if USE_ANIMATE: animate.animate(a,.3 ,completion=lambda dummy:compl(dummy)) else: ui.animate(a,.3,completion=compl) v=ui.View(bg_color='#ffc280',frame=(0,0,200,200)) v.add_subview(ui.TextView(name='text',frame=(20,40,60,40))) v['text'].text='Click above' root=ui.View(frame=(0,0,560,560),bg_color='white') v.center=root.bounds.center() b=ui.Button(frame=(0,0,50,50)) v.add_subview(b) b.title='Shrink' b.action=shrink b2=ui.Button(title='expand',frame=(root.width,root.height,-100,-100)) b2.hidden=True b2.action=expand root.add_subview(b2) root.present('sheet') root.add_subview(v)
tileyon last edited by
abcabc last edited by
ok. My code works in python 3.5. I have modified the code to work in python 2.7 and it is available in the following gist.
Python 2.7 does not allow keyword initialization after *args. Here is the modified portion the code.
class ChainedAnimation(object): """Represents a series of several animations to be played in sequence.""" def __init__(self, *animations, **kwargs): if hasattr(kwargs, 'completion'): self.completion = kwargs['completion'] else: self.completion = None
ccc last edited by
class ChainedAnimation(object): """Represents a series of several animations to be played in sequence.""" def __init__(self, *animations, **kwargs): self.completion = kwargs.get('completion', None)
abcabc last edited by
Thanks. Corrected in gist.