I'm fairly new to Polymer and struggling to get some animations to work imperatively. My page displays a grid of cards. When one is clicked, I want the rest to move off screen.
I can get the cards to move one at a time in code, but since they all need to move in parallel, I think I need a core-animation-group to run them. But...
I can't figure out the syntax for creating a core-animation-group in code, and there doesn't seem to be a "play()" method...?
I'd be very, very grateful for a quick example.
TIA
The documentation on core-animation-group is a bit lackluster, but it is possible to create and play a core-animation-group using only JavaScript. Create your core-animation-group with new CoreAnimationGroup(). Then add child animations with animGroup.appendChild(coreAnim). Finally, play the group with animGroup.play().
You say you want to animate an indeterminate number of cards in parallel. Try something like this:
var cards = document.querySelector("#cards-wrapper").children;
var anim = new CoreAnimationGroup();
anim.type = "par"; // Display child animations in parallel.
anim.duration = 200; // Milliseconds
var cardAnimKeyframes = [
// CSS properties {propName: "value"}
{opacity: 1},
{opacity: 0},
];
for (var i = 0; i < cards.length; i++) {
var childAnim = new CoreAnimation();
childAnim.target = cards[i];
childAnim.keyframes = cardAnimKeyframes;
anim.appendChild(childAnim); // This is critical.
}
// Then, when you are ready...
anim.play();
Hope this helps :D
Related
Hellooooo, hope y'all are doing great.
A while ago, I asked a question about how to do particle explosions in AS3 when I was coming from AS2. Luckily, I got help from Organis (thank you so much btw), but every time I try export the animation in SWF, it keeps crashing my file and I'm not sure why?
I should probably preface that what I'm doing is specifically for animation. I'm not trying to make a game, just a simple script where the movieclip I created can explode into different objects in its timeline...if that made any sense.
In case anyone needs the actual file itself, you can download it right here: https://sta.sh/018lqswjfmp2
Here is the AS2 version in case anyone needs it: https://sta.sh/02fzsqon3ohw
Here is the code given to me by Organis:
// Allows the script to interact with the Particle class.
import Particle;
// Number of particles.
var maxparticles:int = 200;
// I imagine you will need to access the particles somehow
// in order to manipulate them, you'd better put them into
// an Array to do so rather then address them by their names.
var Plist:Array = new Array;
// Counter, for "while" loop.
var i:int = 0;
// The loop.
while (i < maxparticles)
{
// Let's create a new particle.
// That's how it is done in AS3.
var P:Particle = new Particle;
// The unique name for the new particle. Whatever you want it for.
P.name = "particle" + i;
// Enlist the newly created particle.
Plist.push(P);
// At the moment, the P exists but is not yet attached to the display list
// (or to anything). It's a new concept, there wasn't such thing in AS2.
// Let's make it a part of the display list so that we can see it.
addChild(P);
i++;
}
And in case anyone needs it, here is the code I used for AS2:
maxparticles = 200; //number of particles
i = 0; //counter, for "while" loop
while(i < maxparticles){
newparticlename = "particle" + i; //creates a new name for a new particle instance
particle.duplicateMovieClip(newparticlename, i); //duplicates our particle mc
i++;
}
as the Toolbar or Titlearea on scroll animation feature is referenced in the last section of the Toolbar API, and also in this great video tutorial (starting at about min 45), the animation works well under given circumstances.
I was not able to find any documentation about what these have to be, however I found one circumstance, in which it does not work. Here is a working example to demonstrate the problem:
Form hi = new Form("Title", new BoxLayout(BoxLayout.Y_AXIS));
EncodedImage placeholder = EncodedImage
.createFromImage(Image.createImage(hi.getWidth(), hi.getWidth() / 5, 0xffff0000), true);
URLImage background = URLImage.createToStorage(placeholder, "400px-AGameOfThrones.jpg",
"http://awoiaf.westeros.org/images/thumb/9/93/AGameOfThrones.jpg/400px-AGameOfThrones.jpg");
background.fetch();
Style stitle = hi.getToolbar().getTitleComponent().getUnselectedStyle();
stitle.setBgImage(background);
stitle.setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FILL);
stitle.setPaddingUnit(Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS);
stitle.setPaddingTop(15);
// hi.setLayout(new BorderLayout()); // uncomment this for the animation to break
Container contentContainer = new Container(BoxLayout.y());
contentContainer.setScrollableY(true);
// add some elements so we have something to scroll
for (int i = 0; i < 50; i++)
contentContainer.add(new Label("Entry " + i));
hi.add(contentContainer);
// hi.add(BorderLayout.CENTER, contentContainer); // use this line instead of the above for the animation to break
ComponentAnimation anim = hi.getToolbar().getTitleComponent().createStyleAnimation("Title", 200);
hi.getAnimationManager().onTitleScrollAnimation(anim);
hi.show();
With my current app and the codesample from the Toolbar API (which is roughly adapted here), I found out that the onScrollAnimation event is not being called, when a scroll occurs inside a BorderLayout. Even when I have a separate container, which is not the contentpane itself, and I set setScrollableY(true); to true, the animation works properly. The animation stops working, when this very container is put into Center of the Form, via Borderlayout. in the example above, the layout is exactly the same, as there are no other components in other areas of course, but it breaks the animation.
How to solve this? In my app, I have the need for a BorderLayout but still want to use this cool feature. Also, this is a very un-intuitive feature, if it works for some, but not all layouts. It should be completely layout-agnostic and work in every case.
Thank you.
The adapter is bound to the forms content pane scrolling so it won't work if you have a border layout in here. In that case scrolling isn't detected because the code just isn't aware of the scrolling. It would need to track the scrolling of any component in the UI to detect that scrolling.
as hinted by Shai, the solution is the following:
hi.setLayout(new BorderLayout());
Container contentContainer = new Container(BoxLayout.y());
contentContainer.setScrollableY(true);
// add some elements so we have something to scroll
for (int i = 0; i < 50; i++)
contentContainer.add(new Label("Entry " + i));
hi.add(BorderLayout.CENTER, contentContainer); // use this line instead of the above for the animation to break
ComponentAnimation anim = hi.getToolbar().getTitleComponent().createStyleAnimation("Title", 200);
hi.getAnimationManager().onTitleScrollAnimation(contentContainer, anim);
instead of using the onTitleScollAnimation to just add the animation, provide your own scrollable "body" or content container as the first argument, appended by the animation(s).
I do a growth animation of a fixed number of items, and after growth, i moved it to left.
Make growth by apply matrix
var trans_vector = new THREE.Matrix4().makeTranslation(0, height / 2, 0);
var graphics = new Graphics();
var rectangle = graphics.box(width, height, material);
rectangle.geometry.applyMatrix(trans_vector);
When a new item is added, i remove one from the container that will be added to scene
var children = this.container.children;
if (this.current_number === this.max_number) {
this.container.remove(children[0]);
this.current_number = this.max_number - 1;
}
object.position.copy(this.position); // this is a fixed position
this.container.add(object);
this.current_number++;
I write a function to translate to left, using tweenjs (sole)
animateTranslation : function(object, padding, duration) {
var new_x = object.position.x - padding; // Move to left
console.log(new_x); // Duplicated item here :(
new TWEEN.Tween(object.position).to({
x : new_x
}, duration).start();
},
And I remove all the "previous" items, using for loop
for (var i = 0; i < this.current_number-1; i++) {
this.animateTranslation(this.container.children[i],
this.padding,
this.duration/4)
}
The above code run correctly if we open and keep this current tab.
The problem is when we move to another tab, do something and then move back, some objects have the same position, that cause the translation to the same position. It looks weird.
It appears on both Chrome, Firefox and IE11.
I dont know why, please point me out what happened.
Most modern browsers choose to limit the delay in setInterval and pause requestAnimationFrame in inactive tabs. This is done in order to preserve CPU cycles and to reduce power consumption, especially important for mobile devices. You can find more details about each browser in this answer
That means, while the tab is inactive, your tween animation is not working the way it is normally expected to.
A simple solution would be to halt the main animation loop if the tab is inactive using a variable.
window.onfocus = function () {
isActive = true;
};
window.onblur = function () {
isActive = false;
};
I'm trying to build in a change history, rather than a diff style history, I've opted to save the entire object.
This becomes problematic because each copy of the object updates along side the original object.
The Kinetic.Node.clone method seemed like the right thing for me, but it doesn't seem to do what I expect it to do.
Pseudocode:
var History = function(){
var h = this;
h.history = [];
h.pointer = -1;
h.save = function() {
h.history = h.history.slice(0,h.pointer);
h.history.push(im.Stage.createCopy());
h.movePointer(1);
};
h.movePointer = function(diff) {
h.pointer += diff;
(h.pointer < 0 && (h.pointer = 0));
(h.pointer >= h.history.length && (h.pointer = h.history.length-1));
return h.pointer;
};
h.render = function() {
im.Stage = h.history[h.pointer].createCopy();
im.Stage.draw();
};
h.undo = function() {
h.movePointer(-1);
h.render();
};
h.redo = function() {
h.movePointer(1);
h.render();
};
};
How can I create an accurate copy of the stage?
The best method to build up a history system is to store your layers/elements after each operation into an array as serialized values, using layer.toJSON() .
If you use images on layers and eventhandlers that you want to display/work after you restore anything from the history then you will have to reattache images and eventhandlers to the objects/layers/etc because toJSON() does not store images and eventhandlers as it would have been too large data stored. Build up your history like this:
first, try to use projeqht's answer on this question .
second you will have to reattach the images and eventhandlers. With a trick given by markE on this question you can easily handle it.
The best thing for an accurate representation is to do:
var layers = stage.getChildren();
to get the layers. Then do:
var layerChildren = new Array();
for(var i=0; i<layers.length; i++)
layerChildren[i] = layers.getChildren();
each time you want to save a state.
This will store all your layers and their children in an array. Fairly efficient and accurate.
Now you just have to save the list of layers and list of children somewhere and then you can move back and forth between states.
I have about 100 different MCs that I need to apply the following animation to.
total_bananas = 5;
frameCount = 0;
for (i=1;i<=total_bananas;i++)
{
thisMC = _root["mc"+i];
thisMC.startY = thisMC._y;
thisMC.rand = Math.random();
}
this.onEnterFrame = function ()
{
frameCount++;
for (i=1;i<=total_bananas;i++)
{
thisMC = _root["mc"+i];
thisMC._y = thisMC.startY + Math.sin(thisMC.rand*100+frameCount/10)*5;
}
}
how would I go about applying this animation to each of them individually? I don't need to populate 5 of the same MCs. This script is simply the perfect animation visually, but not lean and bespoke like it should be. I just need to make a lot of objects (all unique) bob up and down like they are tied to balloons. Also I was thinking this might be depreciated and there might be a waayy better way to do this.