I am trying to use the replicator layer to create a reflection of my original layer. The problem is I want to apply a different effect on each instance (Rasterize the copy, but keep the original intact). Is this possible using replicator layers, and if not can you suggest a way of achieving this?
Note: I tried duplicating the layers, but I could not because they get copied by reference and thus any effect applied to one is applied to the original layer.
let r = CAReplicatorLayer()
r.bounds = CGRect(x: 0.0, y: 0.0, width: background.frame.width , height: background.frame.height)
r.position = background.center
background.layer.addSublayer(r)
r.addSublayer(masterLayer)
r.instanceCount = 2
r.instanceTransform = CATransform3DMakeRotation(CGFloat(M_PI), 1, 0, 0)
r.masksToBounds = true
r.shouldRasterize = true
r.rasterizationScale = 0.2
Yes, one of the limitations of CAReplicatorLayer is that you don't have direct access to the individual replicated instances.
You can try bypassing CAReplicatorLayer altogether and instead create your own subclass of CALayer, give it an array property to hold the replicated sublayers (allowing you direct access to each of those sublayers) and then endow it with whatever CAReplicator-like abilities you require. This won't be a drop-in replacement for CAReplicatorLayer, of course, and I can't say if it's the solution you're looking for (without knowing the specifics of what you're trying to achieve with those individual layers) but you may want to give it a shot.
I posted a short write-up on this some months ago here (source code here) if you're interested. Hope this helps!
Related
I'm learning to create a game using SprikeKit and the game has something to do with sushi train.
I have something like 20 dishes that follows along a rectangular path in order to simulate the look that all dishes are on a moving conveyor belt.
I've tried with a scene editor to place a couple sprite nodes and made them move on a square path like so.
let dish_1 = self.childNode(withName: "dish_1");
let dish_2 = self.childNode(withName: "dish_2");
let square = UIBezierPath(rect: CGRect(x: 0, y: 0, width: 200, height: 200));
let followSquare = SKAction.follow(square.cgPath, asOffset: true, orientToPath: false, duration: 5.0);
dish_1?.run(SKAction.sequence([followSquare]))
dish_2?.run(SKAction.sequence([followSquare]))
At the moment, the two dishes are using the same square and the square position is relative to each dish so they look like they are on two different rectangular path as their starting point is different.
Is this the reasonable way to simulate the look I'm after?
The reason I'm asking this is that to make all dishes look like they are moving on a same path, I will need to tweak x, y positions of each dish and it will be like 20 dishes.
I was wondering if it would be possible to use physics kit and let one rectangle node makes the all dishes move along the path as long as they are within the rectangle node area.
Well I would have probably done it in a similar way, and I think using SKAction.follow is a solution here.
But there are a few improvements that you could do in your code. The first is that you don't need to write your SKAction as a sequence because it is composed of only one action, so you could simplify your code to this:
let squarePath = UIBezierPath(rect: CGRect(x: 0, y: 0, width: 200, height: 200))
let followAction = SKAction.follow(path: squarePath.cgPath, duration: 5.0)
dish?.run(followAction)
Now an other thing that is important is, in order to save your memory usage, instead of recreating a new dish every time (20 times), you could just use copy() on your SKSpriteNode to create many different copies of it. Depending on what you need to achieve, you can of course custom each copy, changing its color, or position, etc. This would be way more efficient.
You can create a copy of your SKSpriteNode like so:
import GameplayKit
if let dishCopy = dish?.copy() as? SKSpriteNode {
dishCopy.position = CGPoint(x: GKRandomDistribution(lowestValue: 0, highestValue: 200).nextInt(), y: GKRandomDistribution(lowestValue: 0, highestValue: 500).nextInt())
self.addChild(dishCopy)
}
For the position of each dish copy, you can of course adjust to your own values, but here I used GameplayKit and its very useful random values generator.
Update:
If you want to set a unique name to each of your dishes while still using copy(), you have several options.
One possibility would be to generate a unique name using a counter that you would increment, another possibility would be using currentTime in the update method for example.
But another more elegant way of doing this, and to keep tracks of where are all your copies, is to create an array that will store them all.
At the top of your scene subclass, declare your dishes array like so:
var dishes = [SKSpriteNode]()
At the moment, it's still empty, so you need to add each copy to the array at the time you create each of them:
// Create (safely) a dish copy:
if let dishCopy = dish?.copy() as? SKSpriteNode {
// Add the dish copy to the dishes array:
dishes.append(dishCopy)
// And add the dish copy to the world node:
worldNode?.addChild(dishCopy)
}
If you want to create many copies like this, you could use a for loop, or you could play with the update(_ currentTime:) method by specifying that you want to create a new sushi dish every 5 seconds for example :).
And well, if at any time you need to access any of these copies, just do so by accessing the dishes array.
For example, this is how you would remove all the copies (you would have to deal with the original dish if you added it to the scene though) :
// And just iterate through all of your dish copies:
for dish in dishes {
dish.removeFromParent()
// Do whatever you need here :)
}
It's pretty straightforward and it allows you to control perfectly all the objects and/or copies that you added to your worldNode.
Just let me know if you have any other questions I'd be glad to help !
By the way tonight I will actually go to the sushi restaurant you're talking about in your question, the one with the little train.. Nice coincidence ! :D
asOffset does not seem correct. According to the documentation this is exactly the opposite behavior you want.
If YES, the points in the path are relative offsets to the node’s starting position. If NO, the points in the node are absolute coordinate values.
Setting this to true would give each dish their own rectangle path to follow with coordinates relative to their starting position, as you describe in the question:
v First dish
v Second dish
O--O-----.---.
| | | |
| | | |
'--'-----'---'
^^ Second dish's path
^^ First dish's path
Instead, I would imagine you need to set up the conveyor belt in absolute coordinates, then initialize each dish's starting point to be different - again in absolute coordinates - and finally have each dish follow said path:
v First dish (starting point x=0; y=0)
v Second dish (starting point x=20; y=0)
O--O-----.
| |
| |
'--------'
^^ Single, absolute path
(If you're simulating a sushi conveyor belt, they move clockwise and the nomenclature "first" and "second" above are technically backwards. Swapping this is left as an exercise to the reader. :-P)
I have built a circular graph very similar to this example in paintcode:
http://www.paintcodeapp.com/news/animating-apple-watch-activity-rings-in-paintcode
I have successfully drawn out the control on my iOS view with ease, but now I would like to animate the graph so that it begins at 0 and eases towards the specified angle. Basically the animation should look like the first two seconds of the video in the URL above.
What is the best way to go about this type of animation?
FYI: I am working in C#/Xamarin but I am not fussy on syntax at all, so an Objective C or Swift example will do just fine.
I wrote a UIView subclass which does exactly what you're asking for. You just provide an array of rings along with a few other parameters, and it handles all of the setup and management for you.
https://github.com/lionheart/ConcentricProgressRingView
At the top of your UIViewController, import the module:
import ConcentricProgressRingView
Then, in your viewDidLoad:
let rings = [
ProgressRing(color: UIColor.redColor()),
ProgressRing(color: UIColor.blueColor()),
]
let margin: CGFloat = 2
let radius: CGFloat = 80
let progressRingView = ConcentricProgressRingView(center: view.center, radius: radius, margin: margin, rings: rings, defaultWidth: 20)
view.addSubview(progressRingView)
Once you've instantiated your ConcentricProgressRingView instance, animate a specific ring to a percentage with setProgress.
ring.arcs[1].setProgress(0.5, duration: 2)
Under the hood, this just uses CABasicAnimation and sets a few parameters which make it look "right". I know you're not using Swift, but if you want specific pointers, just check out the source code to see how I've solved it. Hope this helps!
You want to use CAShapeLayers, one for each arc, with a full-circle arc installed in each one, and the line cap style set to rounded.
Then you want to set the strokeEnd property to a small value (try .05). That will cause the shape to only draw 5% of it's arc.
Finally you want to submit CAAnimations to each shape layer that animate the strokeEnd value from the starting value to 1.0. That will animate the arcs drawing the full circle.
I don't have any ready-made sample code for you. I do have a sample project written in Objective-C that uses a very similar technique to create a "clock wipe" animation using a CAShapeLayer as a mask layer.
Take a look at the clock wipe animation in the project "iOS CAAnimationGroup demo" project on Github.
I have a cube (rounded) and want to display a texture on one of it's side. I can access the material on that side with:
var tex1: SCNMaterial! = cube.geometry?.materialWithName("_1")!
I then set it's image contents:
tex1.diffuse.contents = "cube1"
This then looks like this:
This shows me that it does work, but the white part is not in the center as
it should be. (The image I am using has the white part in the center.)
I tried to use offset to move the image around on the surface, I would like scale it as well. I tried it like this:
tex1.diffuse.contents.offset = SCNVector3Make(20, 0, 0)
That gives me errors: it says it cannot assign the result of that expression. (I also tried contentMode, same error, I think because these are for UI, not SCN)
Questions
Does anyone know what I can do?
Maybe offset is not the way to go?
How can I scale the image?
The type of a material property's contents is AnyObject, which means the compiler will allow you to call any method (defined on any object type) on it. That doesn't mean all methods or property accessors are actually really implemented by the actual class that's in your particular contents.
Material properties do have a contentsTransform option, though. Have you looked at that?
Here is my solution :
create offset:
let offsetVal = SCNMatrix4MakeTranslation(0, -0.05, 0)
create scale:
let scaleVal = SCNMatrix4MakeScale(1.5, 1.5, 1.5)
if you want to set Offset Property only:
material.diffuse.contentsTransform = offsetVal
if you want to set Scale Property only:
material.diffuse.contentsTransform = scaleVal
if you want to mix them:
material.diffuse.contentsTransform = SCNMatrix4Mult(scaleVal, offsetVal)
hope this helpful!!!
Can anyone help me to achieve this kind of animated transformation through Core Graphics. Look at the rough sketch:
This is a simple chart graphic, and I need to transform a histogramm-style bar (left shape) to a pie chart (right shape).
Literally the task is to roll a rectangle to a ring with a smooth animation. I almost found the way to do this with a tricky queue of drawings, mask clippings and affine transformations but this won't look exactly how I want it to look.
This is an interesting challenge, especially as you want to maintain the different segments. I won't give you a full answer (i.e full example code to achieving this), but I will explain what I think needs to be done to achieve the effect that you want.
Paths
First, I see both of these diagrams as a single line that is stroked (let's ignore the segments for a moment), so the challenge is going from a straight line to an enclosed circle.
I propose the following two paths, that you can animate between to achieve a nice wrapping effect.
// As we render a circle as a chain of straight line segments
// changing the count of said segments makes the circle more or less smooth
// Try this with other values, such as 8 or 32
let segments = 72
// With this segment count, the angle of each segment in the circle is
let angle = (2 * CGFloat(M_PI)) / CGFloat(segments)
// First path (straight)
let length = CGFloat(300.0)
let segmentLength = length / CGFloat(segments)
let straightPath = CGPathCreateMutable()
CGPathMoveToPoint(straightPath, nil, 0.0, 0.0)
for i in 0...segments {
CGPathAddLineToPoint(straightPath, nil, 0.0, CGFloat(i) * segmentLength)
}
// Second path (circle)
let radius = CGFloat(100.0)
let center = CGPoint(x: 104.0, y: 104.0)
let space = (x: 2.0, y: 2.0)
var circlePath = CGPathCreateMutable()
CGPathMoveToPoint(circlePath, nil, center.x + radius, center.y)
for i in 0...segments {
let x = cos(-CGFloat(i) * angle)
let y = sin(-CGFloat(i) * angle)
CGPathAddLineToPoint(circlePath, nil, center.x + radius * x, center.y + radius * y)
}
I have also uploaded a Swift plaground for you to experiment with, which you can find here
Segments
Now, handling the segments can be a bit tricky, however I propose a relatively naive implementation that might work. Mainly, CAShapeLayer has the following two properties - strokeStart and strokeEnd, which allow controlling the part of the path that is actually stroked.
With this in mind, you could create as many layers as there are segments, assign them all the same path(s) and tweak their respective strokeStart and strokeEnd properties to make it look the way you expect. Somewhat similar to what they do in this post.
Animation
Assuming you have conquered the previous two aspects, the animation aspect should be relatively straight forward, using the two types of paths you have, you can create a simple CABasicAnimation that goes from one to another. I will assume you are familiar with CoreAnimation and its usage (i.e how to properly change model values to match those that are presented etc.).
I will end my answer with a quick animation showing what the end result could look like (minus the segments), I have frozen the animation and am manipulating the timeOffset property of the layer to manually scrub through it.
I hope my answer helps you get closer to the solution you want. It is also important to emphasise that my code examples are just a beginning, you will likely need to tweak the values quite a bit to achieve a satisfying animation (for example, the length of the line should be similar to that of the circumference of the circle).
Skewing, twisting and bending are none trivial transformations on bodies.
These can't be done Core Graphics.
Better draw the chart yourself with CGContextAddArcToPoint in core graphic and mask out the inner circle.
The other (hardcore) way would be using a 3d engine - i.e. scene kit - and apply your chart as texture to it.
Objective
I am attempting to create an animated approximation of human writing, using a UIBezierPath generated from a glyph. I understand and I have read the many UIBezierPath questions which sound similar to mine (but are not the same). My goal is to create an animation that approximates the look of a human performing the writing of characters and letters.
Background
I've created a playground that I am using to better understand paths for use in animating glyphs as if they were drawn by hand.
A couple of concepts in the Apple CAShapeLayer (strokeStart and strokeEnd) really don't seem to operate as expected when animated. I think that generally people tend to think of a stroke as if done with a writing instrument (basically a straight or curved line). We consider the stroke and fill together to be a line as our writing instruments do not distinguish between stroke and fill.
But when animated, the outline of a path is constructed by line segments (fill is treated separately and it is unclear how to animate the position of the fill?). What I want to achieve is a natural human written line/curve that shows the start and end of a stroke together with the portion of the fill being added as the animation moves from start to finish. Initially this appears simple but I think it may require animating the fill position (unsure of how to do this), the stroke start/end (not sure if this required given the unexpected caveats with how the animation performs noted above), and making use of sub-paths (how to reconstruct from a known path).
Approach 1
So, I've considered the idea of a Path (CGPath/UIBezierPath). Each path actually contains all of the subpaths required to construct a glyph so perhaps recursing those subpaths and using a CAKeyframeAnimation / CABasicAnimations and an animation group showing the partially constructed subpaths would be a good approach (although the fill position and stroke of each subpath would still need to be animated from start to end?).
This approach leads to the refined question:
How to access and create UIBezierPath/CGPath (subpaths) if one has a complete UIBezierPath/CGPath?
How to animate the fill and stroke as if drawn with a writing instrument using the path/subpath information? (seemingly this implies one would need to animate the strokeStart/strokeEnd, position, and path properties of a CALayer at the same time)
NB:
As one can observe in the code, I do have the finished paths obtained from glyphs. I can see that the path description gives me path-like information. How would one take that information and recast it as an array of sub paths human-writable strokes?
(The idea here would be to convert the point information into a new data type of human-like strokes. This implies a requirement for an algorithm to identify the start, slope, endpoint and boundary of each fill)
Hints
I've noted in Pleco (an iOS app that successfully implements a similar algorithm), that each stroke is composed of a closed path that describes the human-writable stroke. UIBezierPath has a closed path based on continuous connected fills. An algorithm is needed to refine overlapping fills to create distinct closed paths for each stroke-type.
Erica Sadun has a set of path utilities available on github. I haven't fully explored these files but they might prove useful in determining discrete strokes.
UIBezierPath structure seems based on the notion of a contiguous line segments/curve. There are confluence points appearing at the intersections of fills, which represent directional path change. Could one calculate the stroke/fill angle of a curve/line segment and search other curves/lines for a corresponding confluence point? (i.e. connect a line segment across the gap of intersecting fills to produce two separate paths -- assuming one picked up the points and recreated the path with a new line segment/curve)
Introspectively: Is there a simpler method? Am I missing a critical API, a book or a better approach to this problem?
Some alternative methods (not useful - requires loading gifs or flash) for producing the desired outcome:
Good Example (using Flash) with a presentation layer showing progression of the written stroke. (If possible, this is what I would want to approximate in Swift/iOS) - (alt link - see animating image on left)
A less good example showing the use of progressive paths and fills to approximate the written stroke characteristics (animation not smooth and requires external resources):
A Flash version - I am familiar with creating Flash animations but I am disinclined to implement these in the 1000's (not too mention that its not supported on iOS, although I could probably also convert an algorithm to leverage an HTML5 canvas with css animation). But this line of thought seems a bit far afield, after all, the path information I want is stored in the glyphs that I've extracted from fonts/strings provided.
Approach 2
I am considering the use of a stroke-based font rather than an outline-based font to obtain the correct path information (i.e. one where fill is represented as a path). If successful, this approach would be cleaner than approximating the strokes, stroke-type, intersections, and stroke order. I've already submitted a radar to Apple suggesting that stroke-based fonts be added to iOS (#20426819). Notwithstanding this effort, I still have not given up on forming an algorithm that resolves partial-strokes, full strokes, intersections, and confluence points from the line-segments and curves found on the bezier path.
Updated Thoughts Based On Discussion/Answers
The following additional information is provided based on any ongoing conversations and answers below.
Stroke order is important and most languages (Chinese in this case) have clearly defined stroke types and stroke order rules that appear to provide a mechanism to determine type and order based on the point information provided with each CGPathElement.
CGPathApply and CGPathApplierFunction appear promising as a means to enumerate the subpaths (saved to an array and apply the fill animation)
A mask may be applied to the layer to reveal a portion of the sublayer
(I have not used this property before but it appears that if I could move a masked layer over the subpaths that might assist in animating the fill?)
There are a large number of points defined for each path. As if the BezierPath is defined using the outline of the glyph only. This fact makes understanding the start, end, and union of crossing fills an important factor to disambiguate specific fills.
Additional external libraries are available that may allow one to better resolve stroke behavior. Other technology like the Saffron Type System or one of its derivatives may be applicable to this problem domain.
A basic issue with the simplest solution of just animating the stroke is that the available iOS fonts are outline fonts rather than stroke-based fonts. Some commercial manufacturers do produce stroke-based fonts. Please feel free to use the link to the playground file if you have one of these for testing.
I think this is a common problem and I will continue to update the post as I move toward a solution. Please let me know in the comments if further information is required or if I might be missing some of the necessary concepts.
Possible Solution
I am always in search of the simplest possible solution. The issue originates from the structure of the fonts being outline fonts rather than stroke-based. I found a sample of a stroke-based font to test and used that to evaluate a proof of concept (see video). I am now in search of an extended single stroke font (which includes Chinese characters) to further evaluate. A less simple solution might be to find a way to create a stroke that follows the fill and then use simple 2D geometry to evaluate which stroke to animate first (For example Chinese rules are very clear on stroke order).
Link to Playground on Github
To use the XPCShowView function: Open the File Navigator and File
Utilities Inspector
Click the playground file and in the FUI (choose
Run in Simulator)
To access the Assistant Editor: Goto menu View > Assistant Editor
To see resources/sources right-click playground file in Finder and Show Package Contents
If Playground is blank on opening, copy the file to the desktop and reopen (bug??)
Playground Code
import CoreText
import Foundation
import UIKit
import QuartzCore
import XCPlayground
//research layers
//var l:CALayer? = nil
//var txt:CATextLayer? = nil
//var r:CAReplicatorLayer? = nil
//var tile:CATiledLayer? = nil
//var trans:CATransformLayer? = nil
//var b:CAAnimation?=nil
// Setup playground to run in full simulator (⌘-0:Select Playground File; ⌘-alt-0:Choose option Run in Full Simulator)
//approach 2 using a custom stroke font requires special font without an outline whose path is the actual fill
var customFontPath = NSBundle.mainBundle().pathForResource("cwTeXFangSong-zhonly", ofType: "ttf")
// Within the playground folder create Resources folder to hold fonts. NB - Sources folder can also be created to hold additional Swift files
//ORTE1LOT.otf
//NISC18030.ttf
//cwTeXFangSong-zhonly
//cwTeXHei-zhonly
//cwTeXKai-zhonly
//cwTeXMing-zhonly
//cwTeXYen-zhonly
var customFontData = NSData(contentsOfFile: customFontPath!) as! CFDataRef
var error:UnsafeMutablePointer<Unmanaged<CFError>?> = nil
var provider:CGDataProviderRef = CGDataProviderCreateWithCFData ( customFontData )
var customFont = CGFontCreateWithDataProvider(provider) as CGFont!
let registered = CTFontManagerRegisterGraphicsFont(customFont, error)
if !registered {
println("Failed to load custom font: ")
}
let string:NSString = "五"
//"ABCDEFGHIJKLMNOPQRSTUVWXYZ一二三四五六七八九十什我是美国人"
//use the Postscript name of the font
let font = CTFontCreateWithName("cwTeXFangSong", 72, nil)
//HiraMinProN-W6
//WeibeiTC-Bold
//OrachTechDemo1Lotf
//XinGothic-Pleco-W4
//GB18030 Bitmap
var count = string.length
//must initialize with buffer to enable assignment within CTFontGetGlyphsForCharacters
var glyphs = Array<CGGlyph>(count: string.length, repeatedValue: 0)
var chars = [UniChar]()
for index in 0..<string.length {
chars.append(string.characterAtIndex(index))
}
//println ("\(chars)") //ok
//println(font)
//println(chars)
//println(chars.count)
//println(glyphs.count)
let gotGlyphs = CTFontGetGlyphsForCharacters(font, &chars, &glyphs, chars.count)
//println(glyphs)
//println(glyphs.count)
if gotGlyphs {
// loop and pass paths to animation function
let cgpath = CTFontCreatePathForGlyph(font, glyphs[0], nil)
//how to break the path apart?
let path = UIBezierPath(CGPath: cgpath)
//path.hashValue
//println(path)
// all shapes are closed paths
// how to distinguish overlapping shapes, confluence points connected by line segments?
// compare curve angles to identify stroke type
// for curves that intersect find confluence points and create separate line segments by adding the linesegmens between the gap areas of the intersection
/* analysis of movepoint
This method implicitly ends the current subpath (if any) and
sets the current point to the value in the point parameter.
When ending the previous subpath, this method does not actually
close the subpath. Therefore, the first and last points of the
previous subpath are not connected to each other.
For many path operations, you must call this method before
issuing any commands that cause a line or curve segment to be
drawn.
*/
//CGPathApplierFunction should allow one to add behavior to each glyph obtained from a string (Swift version??)
// func processPathElement(info:Void, element: CGPathElement?) {
// var pointsForPathElement=[UnsafeMutablePointer<CGPoint>]()
// if let e = element?.points{
// pointsForPathElement.append(e)
//
// }
// }
//
// var pathArray = [CGPathElement]() as! CFMutableArrayRef
//var pathArray = Array<CGPathElement>(count: 4, repeatedValue: 0)
//CGPathApply(<#path: CGPath!#>, <#info: UnsafeMutablePointer<Void>#>, function: CGPathApplierFunction)
// CGPathApply(path.CGPath, info: &pathArray, function:processPathElement)
/*
NSMutableArray *pathElements = [NSMutableArray arrayWithCapacity:1];
// This contains an array of paths, drawn to this current view
CFMutableArrayRef existingPaths = displayingView.pathArray;
CFIndex pathCount = CFArrayGetCount(existingPaths);
for( int i=0; i < pathCount; i++ ) {
CGMutablePathRef pRef = (CGMutablePathRef) CFArrayGetValueAtIndex(existingPaths, i);
CGPathApply(pRef, pathElements, processPathElement);
}
*/
//given the structure
let pathString = path.description
// println(pathString)
//regex patthern matcher to produce subpaths?
//...
//must be simpler method
//...
/*
NOTES:
Use assistant editor to view
UIBezierPath String
http://www.google.com/fonts/earlyaccess
Stroke-based fonts
Donald Knuth
*/
// var redColor = UIColor.redColor()
// redColor.setStroke()
var pathLayer = CAShapeLayer()
pathLayer.frame = CGRect(origin: CGPointZero, size: CGSizeMake(300.0,300.0))
pathLayer.lineJoin = kCALineJoinRound
pathLayer.lineCap = kCALineCapRound
//pathLayer.backgroundColor = UIColor.whiteColor().CGColor
pathLayer.strokeColor = UIColor.redColor().CGColor
pathLayer.path = path.CGPath
// pathLayer.backgroundColor = UIColor.redColor().CGColor
// regarding strokeStart, strokeEnd
/* These values define the subregion of the path used to draw the
* stroked outline. The values must be in the range [0,1] with zero
* representing the start of the path and one the end. Values in
* between zero and one are interpolated linearly along the path
* length. strokeStart defaults to zero and strokeEnd to one. Both are
* animatable. */
var pathAnimation = CABasicAnimation(keyPath: "strokeEnd")
pathAnimation.duration = 10.0
pathAnimation.fromValue = NSNumber(float: 0.0)
pathAnimation.toValue = NSNumber(float: 1.0)
/*
var fillAnimation = CABasicAnimation (keyPath: "fill")
fillAnimation.fromValue = UIColor.blackColor().CGColor
fillAnimation.toValue = UIColor.blueColor().CGColor
fillAnimation.duration = 10.0
pathLayer.addAnimation(fillAnimation, forKey: "fillAnimation") */
//given actual behavior of boundary animation, it is more likely that some other animation will better simulate a written stroke
var someView = UIView(frame: CGRect(origin: CGPointZero, size: CGSizeMake(300.0, 300.0)))
someView.layer.addSublayer(pathLayer)
//SHOW VIEW IN CONSOLE (ASSISTANT EDITOR)
XCPShowView("b4Animation", someView)
pathLayer.addAnimation(pathAnimation, forKey: "strokeEndAnimation")
someView.layer.addSublayer(pathLayer)
XCPShowView("Animation", someView)
}
A couple of concepts in the Apple CAShapeLayer (strokeStart and strokeEnd) really don't seem to operate as expected when animated.
But surely animating the strokeEnd is exactly what you want to do. Use multiple CAShapeLayers over top of one another, each one representing one stroke of the pen to form the desired character shape.
You want to look at CGPathApply (this is the short answer to your more refined question). You supply it with a function and it will call that function for each element (these will be lines and arc and closes) of the path. You can use that to reconstruct each closed item, and stash them into a list. Then you can figure out which direction each item is drawn in (I think this could actually be the hardest part) and rather then using strokeStart/strokeEnd one each subpath draw it in a layer with a mask and move the mask across the layer.
Progress Report
This answer is posted to emphasize the significant progress being made on solving this question. With so much detail added to the question, I just wanted to clarify the progress on the solution and ultimately (when achieved), the definitive answer. Although I did select an answer that was helpful, please consider this post for the complete solution.
Approach # 1
Use existing UIBezierPath information to identify segments of the path (and ultimately) make use of those segments (and their coordinates) to stroke each subpath (according to available language rules).
(Current Thinking)
Erica Sadun is producing a SwiftSlowly repo on Github that supplies many functions on paths, including what appears to be a promising library on Segments (of a UIBezierPath), Line Intersections and many functions to act on these items. I have not had the time to review completely but I can envision that one might deconstruct a given path into segments based on the known stroke types. Once all stroke types are known for a given path, one might then evaluate the relative path coordinates to assign stroke-order. After that simply animate the strokes (a subclass of UIBezierPath) according to their stroke order.
Approach # 2
Use a stroke-based font instead of an outline-based font.
(Current Thinking)
I have found a sample of a stroke-based font and been able to animate the stroke. These fonts come with a built-in stroke order. I do not have access to a completed stroke-based font that also supports Chinese but encourage anyone with knowledge of such a font to reply in comments.
I have made a recommendation to Apple that they supply stroke-based fonts in future releases. The Swift Playground notes and the files (with sample stroke fonts) are included in the question above. Please comment or post an answer if you have something constructive to add to this solution.
Stroke Order Rules
See the stroke order rules as described on the Clear Chinese website.