This is a as far as I got. Im trying to make a Phenaniskope
bg = new BackgroundLayer
backgroundColor: "pink"
frame = new Layer
width: 250
height: 250
image: "images/phenakistoscope.png"
frame.center()
Utils.interval 1, ->
cycler = Utils.cycle([10, 20, 30, 40, 50])
frame.rotation = cycler()
I made some quick changes and explained in the comments:
http://share.framerjs.com/kr6mvm4y8xcl/
Basically, you left the cycler inside the interval, so it was being "reset" every time, thus you would stop at rotation 10.
Hope this helps!
Related
I am seeing an unexpected initial condition when I set layer opacity multiple times within a UIView.animate block:
movingView.frame = CGRect(x: 120, y: 120, width: 100, height: 100)
movingView.backgroundColor = UIColor.blue
opacityView.backgroundColor = UIColor.red
opacityView.layer.opacity = 0.5
DispatchQueue.main.asyncAfter(deadline: .now() + 3.0) {
UIView.animate(withDuration: 3.0) {
opacityView.layer.opacity = 0
opacityView.layer.opacity = 1
movingView.frame = CGRect(x: 10, y: 120, width: 100, height: 100)
movingView.frame = CGRect(x: 190, y: 120, width: 100, height: 100)
}
}
When this code is run in the playground, the blue (bottom) square animates from the middle of the view to the right edge, as expected, even though the frame is initially set to the left hand position, only the last value is used in the animation.
The red square however, does not animate from 0.5 opacity directly to 1.0. It first jumps to 0.0 opacity with no animation before then animating to 1.0 opacity.
Obviously this is a contrived case, but I ran into this when animating only one of a group of elements, I set all elements to opacity 0, then set the one I wished to be visible to animate to opacity 1. But this did not give the expected animations. I was able to work around this by removing the one I wished to be visible from list of all items.
But I am curious and would like to understand what is occurring here, and why the opacity behaviour differs from animating frame values, and if there is another cleaner way to work around this.
============================================
For clarity, I understand what will make this work, but this is a contrived example, in order to make it work in the real world, my code becomes unnecessarily more complex. I want to know why it is exhibiting this behaviour, and why it is different from animating the frame.
If I understand what you expect, you want to animate your view from 0.5 to 0 then to 1.
In order to do that you should use two animations. Fire the first one then add a completion handler to fire the second one.
Also, you can try to work with alpha instead of opacity.
I hope it helps.
I have two apps, one with a UILabel and one using SpriteKit with a SKLabelNode. I'd like to add a black outline around the white text.
I can't find any outline or border properties or anything like that within swift. I've tried just creating new labels with slightly bigger, black font behind them but that didn't look right at all.
Here is my game with SpriteKit
title.position = CGPoint(x: self.frame.width / 2, y: self.frame.height / 2)
title.text = "Tap to start!"
title.fontName = "Arial"
title.zPosition = 10
title.fontSize = 50
self.addChild(title)
And here is my other one that uses UILables (It's within a red rectangle so it's easier to see)
let rectangle = UIView(frame:CGRect(x: self.view.frame.size.width / 2 - 150, y: self.view.frame.size.height / 2 - 75, width: 300, height: 150))
rectangle.backgroundColor = UIColor.red
self.view.addSubview(rectangle)
let label = UILabel(frame: CGRect(x: rectangle.frame.size.width / 2 - 75, y: rectangle.frame.size.height / 2 - 10, width: 150, height: 20))
label.textAlignment = .center
label.text = "Tap to Start!"
label.textColor = UIColor.white
label.font = UIFont(name: "Arial", size: 20)
rectangle.addSubview(label)
How do I outline these labels?
For SKLabelNode's, there is no 'easy' way of outlining text. There is however a 'hack'. It involves adding 8 additional duplicate nodes around the label that are coloured black (or whatever colour you want the outline to be), have a zPosition less than the original and otherwise, be identical.
It's important that each label has the same font size as the original.
Your attempt at doing this involved increasing the font size of your one outline copy label. As you said in the question, it doesn't work. You have to use multiple labels so the effect appears seamlessly.
You would place one copy directly above the original, one directly below, one to the left, one to the right, then one on each corner (top right, top left, bottom right, and bottom left). This gives the effect of an outline, however is not efficient and should be taken with a grain of salt.
Note: Keep the amount shifted from the original consistent for all the copies, so the 'outline' is evenly sized.
This should work for UILabels too, however I think there might be an easier way to do this with UILabels.
I'm having trouble figuring out how to lay out views in Swift Playgrounds for iPad, though this may also be relevant to Mac users.
The following code should create a view with a red square (also a view) that is near the edges of its' super view, but not touching them.
let v = UIView(frame: CGRect(x: 0, y: 0, width: 500, height: 500))
let sqv = UIView(frame: CGRect(x: 400, y: 400, width: 50, height: 50))
sqv.backgroundColor = .red
v.addSubview(sqv)
PlaygroundPage.current.liveView = v
The result is not what you'd expect:
I suspect I know what is going on here; live views are at a fixed size that is larger than the display area. Some characteristics of the view are ignored when it is acting as the live view. However, I can't find where this is mentioned in the documentation, which vexes me. More importantly, how do I deal with this? I would like to be able to layout simple UIs that change to fit the current size of the live view. I don't know how to address this issue without trial & error and hardcoding, which are two things I would really like to avoid.
I suspect I know what is going on here; live views are at a fixed size that is larger than the display area.
Actually it's more like the other way around. An iPad screen is 1024 points wide (in landscape orientation). The right-hand pane (where it shows your live view) is 512 points wide. The playground forces your root view (v) to fill that pane, inset by 40 points on the left, right, and top (and more on the bottom). So your root view's width is forced to 432 ( = 512 - 2 * 40), less than the 500 you specified.
Views created in code (like yours) have translatesAutoresizingMaskIntoConstraints = true, and a resizing mask of 0, which means don't adjust the view's frame at all when its parent is resized. So the playground resizes your root view to width 432, but your root view doesn't move or resize its subview (sqv).
The easiest fix is to set the autoresizing mask of the subview to express your intent that it remain near the right and bottom edges of the root view. That means it should have flexible top and left margins:
let v = UIView(frame: CGRect(x: 0, y: 0, width: 500, height: 500))
let sqv = UIView(frame: CGRect(x: 400, y: 400, width: 50, height: 50))
sqv.autoresizingMask = [.flexibleLeftMargin, .flexibleTopMargin]
sqv.backgroundColor = .red
v.addSubview(sqv)
PlaygroundPage.current.liveView = v
Result:
let sqv = UIView(frame: CGRect(x: UIScreen.mainScreen().bounds.width-50-1, y:400, width: 50, height: 50))
The above code places your subview 1 point away from the right of the main view. Try changing the value 1 after 50 in x to desired value.
I am trying to create a 3D effect in Titanium for an image.
can you please provide pointers on how to make an image that looks like
to look like
I looked at transform, create2dmatrix etc - but the documentation is not too clear for me.
var image2 = Titanium.UI.createImageView ({
image: '/giraffe.jpg',
height: '323',
width: "270",
left: "1px",
});
thanks..
ok.. after struggling with trying to understand the documentation, the following expriment fixed it for me.
var image2 = Titanium.UI.createImageView ({
image: '/giraffe.jpg',
height: '323',
width: "270",
left: "1px",
});
t.m34 = 1.0/1000;
t = t.rotate (20,0,1,0);
t = t.rotate (20,0,1,0);
img.transform = t ;
and everything works fine..
I have some images that are .png's with transparent backgrounds however, when they are added to the stage they have white backgrounds. Am i missing a trick here?
Each image is added like so:
var layer = new Kinetic.Layer();
var book = new Image();
book.onload=function () {
bookImg = new Kinetic.Image ({ x: 885, y: 780, offset: [85.5, 106], image:book, name:book, opacity: 0, /*scale:{x:0.5, y:0.5}*/ });
layer.add(bookImg);
stage.add(layer);
}
book.src = "images/book.png";
is it that the layer itself is what's creating the white background?
a little confused!
Cant it be that you have to set the background to transparent? Not only the picture itself but the image-object containing the image. Maybe the layer aswell.
You shouldn't need to set the opacity on a Kinetic.Image() object. If you want it to be invisible, either initially or after being placed, simply use hide() (and subsequently show() to re-show it). Or set visible to false in the parameters. The minimum needed to place an image on the stage looks like this:
var image = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
width: 300,
height: 120
});
layer.add(image);
layer.draw();
This assumes your layer has already been added to a Kinetic.Stage() and the image has loaded ( imageObj.onload = function(){} ). Including a name is fine, the offset and opacity (and even scale) are valid key/value pairs for parameters but not really necessary when creating the image. These can always be set after the image has been added to the layer as well (using one of the many setters in the KineticJS library).
I'd try using a minimalist approach to see if the image shows up as intended first, then go from there.