I've started learning a-frame recently and I'm trying to create a domino effect type thing. I want all of my animations to start after I click on the first object. I've tried using delay but the delay starts immediately instead of after I start the animation. How do I make it so after someone clicks object 1, object 2's animation would start shortly after?
Let's try the delay approach - with a custom component for some managment :)
Lets say you have a setup like this (html pseudocode):
<a-box class='domino' foo animation='startEvents: go; ...
<a-box class='domino' animation='startEvents: go; delay: 200 ...
<a-box class='domino' animation='startEvents: go; delay: 400 ...
All items have some attributes / components:
The class attribute to make them easy to both grab and distinguish from any other entities.
The animation component which will make them animate - whats important: startEvents - here we'll throw the event which will be emitted simultaneously on all boxes, delay - so every next box will wait before moving.
This foo component - we'll make it by ourselves. It will detect a mouseclick, and emit the go event on all boxes.
So the concept is as follows:
We click one box with the foo component
the foo component detects the click and emits go on all .domino elements
all .domino elements should start their animations one after another - but each one 200ms later than the previous one.
Now lets make the custom component. Keep in mind it has to be defined before the <a-scene>:
<script src='component.js'></script>
<script>
// component
</script>
<a-scene>
</a-scene>
We will implement all logic within the init function - which is called upon initialisation.
// component definition
AFRAME.registerComponent('foo', {
// this is called upon initialisation
init: function() {
// grab all the domino pieces
var pieces = document.getElementsByClassName('domino')
// if this one gets pressed...
this.el.addEventListener('click', e => {
// ...emit the event on all of them
for (let piece of pieces) {
piece.emit('go')
}
})
}
})
and actually - thats it. To see it in action - here are two examples - in both clicking the blue box, should start the animation.
Simple delayed animation cascade
Domino-like animation
Related
I need to update the Circular progress bar percent based on vuejs life cycle hooks BeforeCreate and Created. This progress bar has to stop when the record is completely created.
You can do that by binding the value attribute of the circular progress bar to a variable like :value="pBarValue" and set your desired percentage to it at each hook like :
beforeCreate() {
this.pBarValue = 0;
}
created() {
this.pBarValue = 100;
}
and you can use v-if or v-show based on your situation, for when you want to display it and when you want to hide it.
just note that the whole process usually goes very fast and if you want to see the result you should probably use console.log !
The is pretty straightforward. I'm trying to find a way to get the active section Index number. I want the number to change when you scroll to a different section.
What I want to achieve:
Demo
Make use of fullPage.js callbacks or state classes.
Notice you have the slideIndex on the callbacks:
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
//do whatever here
$(body).append(slideIndex);
},
Because the afterSlideLoad callback won't get fired on section change, you'll need to also make use of the afterLoad callback and get the slide number by using the state classes added by fullPage.js:
afterLoad: function(anchorLink, index){
var slideNumber = $('.fp-section.active').find('.fp-slide.active').index() + 1
//do whatever here
$(body).append(slideNumber);
}
I have a slickgrid that, in the 'onMouseEnter' event, I do the following:
change the underlying css for the row in question
call grid.invalidateRow()
call grid.render()
These latter two calls are necessary for the new css classes to be reflected. However, I then need to capture the onMouseLeave event, and it is not fired when I move my mouse away from the cell (or row), presumably because the call to invalidate/render has placed a new DOM element under my mouse, and it's no longer the one I initially "entered."
So I have two questions:
Is there another way to have the new css classes for a given cell be rendered without calling invalidateRow/render?
If not, is there another way to do this and still have the onMouseLeave event fired?
One option is to use the setCellCssStyles function.
grid.onMouseEnter.subscribe(function(e, args){
var cell = grid.getCellFromEvent(e),
param = {},
columnCss = {};
for(index in columns){
var id = columns[index].id;
columnCss[id] = 'my_highlighter_style'
}
param[cell.row] = columnCss
args.grid.setCellCssStyles("row_highlighter", param);
})
So the above changes the background-color of every cell of the row that has been moused into. In my fiddle, the mouseLeave subscription performs a simple console.log to ensure it is still firing.
Edit: fixed the external resource usages in the fiddle for cross-browser support
I was wondering how to handle the fact that an interrupted transition within d3.js does not trigger an end event. As the API doc says
Note that if the transition is superseded by a later-scheduled
transition on a given element, no end event will be dispatched for
that element; interrupted transitions do not trigger end events.
from: https://github.com/mbostock/d3/wiki/Transitions#control
In my case transitions are triggered by user interaction. These transitions might be interrupted when the user triggers a new transition through mouse click. Let's say in the first transition an element was meant to fade out and be removed at the end of the transition. If this transition is interrupted the element will never be removed. I could disallow further user interaction during the time a transition happens yet that is not really what I want (particular as i have back and forward buttons which allow the user to click through previous states of my svg graph quickly ... ) Basically I would need an "Interruption Event"
Thanks
martin
I think there is no really satisfactory way to do this. A little bit painful workaround would be counting the number of transitions currently taking place and reasoning from that.
So, initialize:
var transitionCount = 0;
And whenever you schedule new transitions:
if ( transitionCount != 0 ) {
// handle interrupted transitions here somehow
transitionCount = 0;
}
var myTransition = selection.transition().... ;
transitionCount += myTransition.size();
myTransition.each('end', function() { transitionCount --; });
If you can handle manually cleaning up interrupted transitions like this, this would be fine. Notice, that you can't use 'start' events to increment the counter as there is a delay between scheduling a transition and it being started so you'd get a race condition there.
Seems like an easy solution but I can't wrap my head around it. I have four divs like the one below
<div ontouchstart="touchStart(event)" ontouchmove="touchMove (event)" ontouchend="touchEnd (event)" class="c1" id="c1">copy1</div>
The code for touchStart is very simple at the moment:
function touchStart (e) {
e.preventDefault();
e.target.style.color="#ff0000";
return false;
}
The issue is how can the touch functions target a different div (not the target that was touched) and change it's opacity from 0 to 1 in touchStart, then from 1 to 0 in touchEnd.
Thanks
I'm no expert but here's my two cents and hopefully will help you find a solution
With jquery, clicking one element can trigger a different one and change the target's css opacity attribute like:
$("#div_thats_touched").click(function(){
$("#target_div").css("opacity","1");
})
in javascript it would be something like
this.onClick(function(){
target=document.getElementById('target');
target.style.opacity("1");
});
or if you want to trigger the event of another element:
$("#div_thats_touched").click(function(){
$("#target_div").trigger("click");
})
And instead of having touchstart and touchend, you could use jquery's toggle method to combine them into one method (maybe)
http://api.jquery.com/toggle/
http://api.jquery.com/trigger/