daily pastebin goal
59%
SHARE
TWEET

iOS Lockscreen Framer

MoKuhn Nov 1st, 2018 150 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. # sketch import
  2. $ = Framer.Importer.load("imported/Tobi@2x", scale: 1)
  3. #var
  4. counter = 1
  5.  
  6.  
  7. #anzeige code / clipboard
  8. eq = new TextLayer
  9.     fontFamily: "Roboto"
  10.     fontWeight: 400
  11.     fontSize: 12
  12.     height: 21
  13.     lineHeight: 1
  14.     text: "0"
  15.     textAlign: "center"
  16.     color: "#fff"
  17.     x: 213
  18.     width: 80
  19.     y: 8
  20.  
  21. #feedback
  22. pinWrap = new Layer
  23.         height: 0
  24. genratePins = ->
  25.     pins = []
  26.     for i in [0...counter]
  27.         pin = new Layer
  28.             borderRadius: 100
  29.             y: 141
  30.             x:  114 +44 * i
  31.             borderRadius: 100
  32.             backgroundColor: "#fff"
  33.             opacity: 1
  34.             width: 14
  35.             height: 14
  36.             parent: pinWrap
  37.         pins.push(pin)
  38. #wiggle animation
  39. shakeR1 = new Animation pinWrap,
  40.     x: -4
  41.     options:
  42.         time: 0.1
  43. shakeL1 = new Animation pinWrap,
  44.     x: +4
  45.     options:
  46.         time: 0.1
  47. shakeR2 = new Animation pinWrap,
  48.     x: -4
  49.     options:
  50.         time: 0.1
  51. shakeL2 = shakeR1.reverse()
  52. #animations-loop
  53. shakeR1.onAnimationEnd ->
  54.     shakeL1.start()
  55. shakeL1.onAnimationEnd ->
  56.     shakeR2.start()
  57. shakeR2.onAnimationEnd ->
  58.     shakeL2.start()
  59. shakeL2.onAnimationEnd ->
  60. #array leeren
  61.     pinWrap.destroy()
  62.     pinWrap = new Layer
  63.         height: 0
  64.  
  65. #interaktionen
  66. $.no1.onTap ->
  67.     genratePins()
  68.     eq.text = eq.text + "1"
  69.     counter = counter+ 1
  70.     if counter > 4
  71.         eq.text = 0
  72.         counter = 1
  73.         shakeR1.start()
  74. $.no2.onTap ->
  75.     genratePins()
  76.     eq.text = eq.text + "2"
  77.     counter = counter+ 1
  78.     if counter > 4
  79.         eq.text = 0
  80.         counter = 1
  81.         shakeR1.start()
  82. $.no3.onTap ->
  83.     genratePins()
  84.     eq.text = eq.text + "3"
  85.     counter = counter+ 1
  86.     if counter > 4
  87.         eq.text = 0
  88.         counter = 1
  89.         shakeR1.start()
  90. $.no4.onTap ->
  91.     genratePins()
  92.     eq.text = eq.text + "4"
  93.     counter = counter+ 1
  94.     if counter > 4 && eq.text != "01234"
  95.         eq.text = 0
  96.         counter = 1
  97.         shakeR1.start()
  98. #unlock; hier pin ändern
  99.     if counter > 4 && eq.text == "01234"
  100.         pinWrap.animate
  101.             opacity: 0
  102.             options:
  103.                 time: 0.3
  104.         pinWrap = new Layer
  105.             height: 0
  106.         eq.text = 0
  107.         counter = 1
  108.         $.lockscreen.animate
  109.             y: -667
  110.             options:
  111.                 delay: 0.5
  112.                 time: 0.35
  113. $.no5.onTap ->
  114.     genratePins()
  115.     eq.text = eq.text + "5"
  116.     counter = counter+ 1
  117.     if counter > 4
  118.         eq.text = 0
  119.         counter = 1
  120.         shakeR1.start()
  121. $.no6.onTap ->
  122.     genratePins()
  123.     eq.text = eq.text + "6"
  124.     counter = counter+ 1
  125.     if counter > 4
  126.         eq.text = 0
  127.         counter = 1
  128.         shakeR1.start()
  129. $.no7.onTap ->
  130.     genratePins()
  131.     eq.text = eq.text + "7"
  132.     counter = counter+ 1
  133.     if counter > 4
  134.         eq.text = 0
  135.         counter = 1
  136.         shakeR1.start()
  137. $.no8.onTap ->
  138.     genratePins()
  139.     eq.text = eq.text + "8"
  140.     counter = counter+ 1
  141.     if counter > 4
  142.         eq.text = 0
  143.         counter = 1
  144.         shakeR1.start()
  145. $.no9.onTap ->
  146.     genratePins()
  147.     eq.text = eq.text + "9"
  148.     counter = counter+ 1
  149.     if counter > 4
  150.         eq.text = 0
  151.         counter = 1
  152.         shakeR1.start()
  153. $.no0.onTap ->
  154.     genratePins()
  155.     eq.text = eq.text + "0"
  156.     counter = counter+ 1
  157.     if counter > 4
  158.         eq.text = 0
  159.         counter = 1
  160.         shakeR1.start()
  161.  
  162. #unlocked
  163. $.Home.x = 0
  164. $.lock.onTap ->
  165.     $.lockscreen.animate
  166.         y: 0
  167.         options:
  168.             time: 0.35
  169. #cancel
  170. $.Cancel.onTap ->
  171.     pinWrap.destroy()
  172.     eq.text = 0
  173.     counter = 1
  174. #pin: 1234
  175. #wiggle-animation geht nur beim ersten mal, da Framer nicht checkt, dass der gelöschte layer wiederhergestellt wird 🤷🏻‍♂️
  176. #freuen uns auf den sixer bier! 🍻
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top