[Lab] ui.animate - sliding in views

[JonB]

@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]

@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

[JonB]

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]

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]

@JonB ui2 reports an error at animate.py line 77

[JonB]

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]

@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]

@abcabc Yes I do get a syntax error in "animate.py" at line 77 that I reproduce below:

def init(self, *animations, completion=None):

JonB's code works perfectly if USE_ANIMATE is false. Otherwise, I get the same "line 77 error". Thank you for the code sample, its views are very nice indeed.

[abcabc]

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.

https://gist.github.com/balachandrana/097b35a63c3bcf8b64ec198413df9b7e

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]

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]

Thanks. Corrected in gist.