I'm trying to animate a canvas on three different layers on the onmousedown and ontouchstart. The three canvas go from left to right at a different speed to give a perspective effect as long as the onmouseup or ontouchend are not fired.
I am using #-webkit-keyframes css to do my animations:
#-webkit-keyframes aCarsRight
{
from{background-position: 0px 0px;}
to{background-position: 640px 0px;}
}
.cars_move_right
{
-webkit-animation-name: aCarsRight;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: 1;
-webkit-transition-timing-function: linear;
}
What I would like to do is get the current background-position of the three layers prior to disabling the pan animation and set them manually so when I remove the .cars_move_right class from my div is stays in the same position instead of rolling back to its default position.
Is there a way to get the background-position or just a work around to get what I want? The page is meant for iPhone and iPod Touch.
Thanks !
I found something interesting. Instead of grabbing the background-position, stop the animation and set the background-position to my divs, I pause the animation.
document.getElementById('global').style.webkitAnimationPlayState = 'paused';
document.getElementById('global_cars').style.webkitAnimationPlayState = 'paused';
document.getElementById('global_car').style.webkitAnimationPlayState = 'paused';
Haven't had the chance to test it on iPhone yet.
And, here's a method that seems to work cross-browswers to get any property:
window.getComputedStyle(document.getElementById('div'))['background-position'];
Have you tried:
var blah = ele.style.backgroundPosition;
That will return it like "10px 57px"
If the css rule has a hyphen in it then afaik in Javascript the hyphen is removed and camel case applied.
I found that I can use this to get the property I couldn't get with [mydiv].style.[property]
function getProperty(property, div)
{
return window.getComputedStyle(document.getElementById(div))[property];
}
Related
I have a ScrollRect to which I add content to. When it reaches the point where the content is longer than the ScrollRect (ie when the ScrollBar's value changes from 0), I want the ScrollRect to scroll all the way down (I do this by tweening the ScrollBar's value until it reaches 0). However, my problem is that I can't figure out how to do this smoothly over time.
Here's my code snippet:
public void Update() {
if (scrollbar.size < 1 || scrollbar.value > 0) {
LeanTween.value(scrollbar.value, 0, duration).setOnUpdate((float val) => {
if (scrollbar.value == 0) {
LeanTween.cancel(this.gameObject);
} else {
scrollbar.value = val / scrollAdjustment;
}
});
}
}
I tried using "Time.deltaTime" and "Time.time" in place of duration and it did not seem to matter. Here's a gif of what happens:
(In this example, I used "duration" that had the value of 5 (the idea was to have the transition take 5 seconds) and "scrollAdjustment" was 50 but it did not seem to matter what I set either of these values to.
You can see it instantly snaps to the bottom. I'd like this to be a smooth transition. Any help is appreciated!
My settings:
Then here is me scrolling with my mouse wheel while the autoscroll feature is turned off (because I'm using Rewired, I am intercepting an input called "ZoomIn" and "ZoomOut" and add "0.01f * scrollSpeed" (where scrollSpeed is 15 in this case):
You shouldn't need to add any additional code to make the scroll bar function as the way you want it to. Try deactivating your script and mess with your scroll bar. Make sure you have your Number Of Steps On Your Scrollbar Component as 0 to make it smooth. If it's still not working, send some screenshots of your scroll gameobject to see if the rect is the problem or something else.
I tried to change the color via script on runtime of the cursor and it worked to 75%:
Mesh_top is the only part that does not change the color and I dont know why.
All 4 parts use the same material, named "cursormaterial".
What I tried:
Changing the color by referencing to cursormaterial
Changing the color by getting the component SkinnedMeshRenderer
Trying to use ProptertyBlock
In all three cases I got the same result. The only thing that works is before hitting play I can change the color, this will change the color of the whole cursor. Changing it on runtime works only for 3 of 4 parts...ยด
--Edit--
public SkinnedMeshRenderer cursorRendererOne, cursorRendererTwo, cursorRendererThree, cursorRendererFour;
private MaterialPropertyBlock _propBlock;
public Material material;
void Start()
{
_propBlock = new MaterialPropertyBlock();
}
public void OnInputDown(InputEventData eventData)
{
if (!isActivated)
{
//#1
material.color = Color.blue;
//#2
cursorRendererOne.sharedMaterial.color = Color.blue;
//#3
cursorRendererOne.GetPropertyBlock(_propBlock);
_propBlock.SetColor("_Color", Color.blue);
cursorRendererOne.SetPropertyBlock(_propBlock);
cursorRendererTwo.SetPropertyBlock(_propBlock);
cursorRendererThree.SetPropertyBlock(_propBlock);
cursorRendererFour.SetPropertyBlock(_propBlock);
isActivated = true;
}
Here u see the changed material, but the mesh_top looks but different:
This is a "Bug" (maybe an intended one?).
Open the Animation window (CTRL + 6)
And in the hierachy select the CursorVisual
If you now go to the animation called CursorWaitingAnim you can see there is a keyframe for the top_mesh color.
This single keyframe causes that the color of that tile can not be changed on runtime. The reason is that the animator runs after OnInputDown so it reverts the changes for any keyframed property.
So if you don't need the Waiting animation simply remove that keyframe.
=> you can manipulate the color at runtime again!
Alternatively you could replace it by a one that instead of fixing the color simply disables the SkinnedMeshRenderer instead which basically has more or less the same effect but doesn't screw the colors:
What would be the best way to make a Swift SKSpriteNode auto correct its orientation after it has had a couple of physicsBody knocks and is now not in the default orientation?
For example I have have a 2D stick-man who gets knocked to the side by another object and would like the stick-man to tilt and reorient itself to the default standing position.
The way I have done this in the past is to wait until the physics body comes to rest, turn off the physics engine for the stickman, reorient the stickman, turn the physics engine back on again.
Write yourself an action called standupAction which animates the stickman's reorientation, maybe just a rotate or a jump up. Then do something like the following.
Sorry this Objective-C not Swift, don't know swift, but should be easy to translate.
if (stickman.physicsBody.resting) {
stickman.physicsBody.dynamic = NO;
[stickman runAction:[SKAction sequence:#[
standupAction,
[SKAction runBlock:^{ stickman.physicsBody.dynamic = YES;}]
]]];
}
The only downside of this approach is that sometimes it can take a full second until the stickman comes comes to rest. Box2d takes quite a long time to settle down. But it looks very realistic if you wait.
Alternatively, you could just check the orientation of stickman and if he is >45degrees off balance then reorient him with impulses. I find impulses to be very difficult to know how much force to apply when you need precise movement like this.
Just to update, I couldn't afford to set the physicsBody to not be dynamic.
My scene updates each node, similarly to Apple's Adventure game, as such I implemented the rotation in the subclassed SKSpriteNode's update method as such:
if (isTouchingGround) {
if self.zRotation != 0 && !rotating {
let actions = [
SKAction.runBlock {
self.rotating = true
},
SKAction.rotateToAngle(0, duration: 1.0),
SKAction.runBlock {
self.rotating = false
}]
runAction(SKAction.sequence(actions))
}
}
I'm using easelsjs and I need to make a simple transition.
Just change the opacity of the stage gradually.
I'm using the alpha property and the Ticker but I don't see the transition but only the last stage of it.
Is there a simple example for this - I tried to look but couldn't find
I don't know if you want to change the stage opacity or the shape opacity, but if you want your entire canvas to have less opacity, you can simply use JavaScript + CSS transitions to do it. No need for EaselJS in this case.
But if you want to create alpha transitions on canvas objects you should take a look at TweenJS, it simplifies the animation process a lot.
Also, if you want to continue using EaselJS only (or with TweenJS), you'll need to implement the ticker properly, here's how I create my ticker function:
createjs.Ticker.on("tick", tick);
createjs.Ticker.setFPS(60); // This will call the tick() function at every 1000/60ms
function tick() {
stage.update();
}
And then you'll need to say when your button was clicked to your ticker function, so it can decrease your object's alpha every frame. I highly recommend using TweenJS instead of doing this (I've put a TweenJS demonstration at the end of this answer):
$(document).ready(function () {
var stage = new createjs.Stage(canvas);
var s = new createjs.Shape();
s.graphics.beginStroke("#F00").beginFill("#FF0000").drawRect(150.5, 100.5, 300, 300);
stage.addChild(s);
$("#d").click(function () {
s.fadeOut = true;
});
// Tick:
createjs.Ticker.on("tick", tick);
createjs.Ticker.setFPS(60);
function tick() {
if(s.fadeOut){
s.alpha -= 0.01;
s.fadeOut = (s.alpha > 0.4);
}
stage.update();
}
});
I've simplified your code a little bit too. Here's how the code inside the click event handler would look using TweenJS:
createjs.Tween.get(s).to({alpha: 0.4},1000);
Note that both EaselJS and TweenJS work together.
I'm creating an app that will have a different menu if the phone is held landscape, or portrait.
I figure I have to tell flash to move to a new frame when the phone moves from landscape to portrait or vice versa, but I'm not sure the exact code to after creating the orientation event listener.
There are two ways. Listen for a StageOrientationEvent or listen for Event.RESIZE. I personally prefer to use RESIZE as it is called slightly more often and keeps your interface in sync more.
var landscapeNav:Sprite; // this would be your landscape nav. Obviously does not have to be a Sprite
var portraitNav:Sprite; // same as landscapeNav, but this represents your portrait nav
stage.addEventListener( Event.RESIZE, this.stageResizeHandler );
function stageResizeHandler( e:Event ):void {
if ( stage ) { //just to make sure the stage is loaded in this class so we avoid null refs
if ( stage.stageWidth >= stage.stageHeight ) {
landscapeNav.visible = true;
portraitNav.visible = false;
}
else {
landscapeNav.visible = false;
portraitNav.visible = true;
}
}
}
This could definitely be cleaned up (landscapeNav.visible = stage.stageWidth > stage.stageHeight) but this should give you something to go on. If you want to do an animation as Atriace suggested, you would do a TweenLite/Max call within the conditional in the function instead of setting visible to true/false (after the animation is done, though, you should set visible to false just for the same of optimzation)
You don't need to create a new frame. In fact, it may be more visually appealing to watch the old menu slide off, and the new one to animate in (like with TweenLite).
The documentation on orientation change can be found # Adobe's ActionScript APIs specific to mobile AIR applications: "Screen Orientation", and the API.