SwiftUI 2 - TimeLine Animation with Combine Timer
Experiment
==========
using Flutter-Dart Time-Line Animation Concept.
LongPress to Start or Stop
Tap(single) to pause and resume
Release with MIT License
https://1drv.ms/u/s!ApN1U-GH6AeIoAFNB...
4 phases
A. 5 seconds, Zoom and achor to the LHS
B. 15 Seconds Pan to Right
c. 15 seconds Pan reverse to Left
D: 15 seconds Restore.
at 24 fps, 50 seconds = 1200 frames
For each frame, calcuate Scale, andOr translateX.
======================
// UI
Image(uiImage: uiiPublisher2.uii! ).resizable().scaledToFit()
.onAppear
{
// Calc Overzoom Scale
let w = uiiPublisher2.uii!.size.width
let h = uiiPublisher2.uii!.size.height
let ar : CGFloat = w / h
// assume Pano, anchor at center
let scaledHeight = contextWidth / ar
myTicker.xStart = contextWidth * 0.5
myTicker.dstZ = contextHeight / scaledHeight * 1.15
myTicker.dstX = (0.5 * contextWidth * myTicker.dstZ)
myTicker.dstXend = -(0.5 * contextWidth * myTicker.dstZ) + contextWidth * 0.5
}
.scaleEffect(myTicker.zs, anchor: .center)
.offset(x: myTicker.tx, y: 0 )
==============================
// Combine, time ( MyTicker )
switch nextFrame {
case 1...120:
let x : Float = Float( Double(nextFrame) / 120.0)
let atStep = CGFloat( Curve.quadratic.easeInOut(x) )
tx = atStep * (dstX - xStart )
zs = atStep * (dstZ - 1) + 1
lastZ = zs
break
case 121...480:
let stepx = (dstXend * 2 ) / 360.0
tx += stepx
break
case 481...840:
let stepx = (dstXend * 2 ) / 360.0
tx -= stepx
lastX = tx
break
case 841...1199:
let x : Float = Float( Double(nextFrame - 840) / 360.0)
let atStep = CGFloat( Curve.quadratic.easeInOut(x) )
tx = (1 - atStep ) * lastX
zs = lastZ - atStep * (lastZ - 1.0)
break
default:
tx = 0
ty = 0
zs = 1
break
}
// Combine timer start
func startTicker()
{
cancellable = Timer.publish(every: 0.041667, on: .main, in: .common)
.autoconnect()
.assign(to: \.time, on: self)
isPaused = false
isTimerOn = true
print("Ticker Start.......")
}
==========================================================
For Testing and Educational Purposes
Release with MIT License
https://1drv.ms/u/s!ApN1U-GH6AeIoAFNB...
For Testing and Educational Purposes
Resources:
Xcode 12
MacOS 10.15.7
iOS Simulator
https://www.flickr.com/photos/1314113...
/ @lawrencetsang3368
====================
Pexels and pixabay images
External Sources (for EASING)
Easing Func (MIT)
https://github.com/manuelCarlos/Easing
RealNumber Package (Apache)
https://github.com/apple/swift-numerics