Hi Im a newbie in camanjs.
I manipulate canvas with this code.
function vintage(id){
Caman(id, function(){
//I just added this code to reset the canvas to its original state
this.revert();
//----------------------------
this.vintage();
this.render();
});
}
With the code this.revert(); , I can turn the canvas back to its original state.
What if I use multiple effects and presets and just I want to revert the canvas few steps back to my last used effect?
I don't see a way to do that, but you can stash the canvas in a hidden span, and then replace it as part of an undo chain.
use clone to stash it
Related
I try to recreate this effect with curtains-react but I can not find a shader that corresponds, and at the same time make the uniforms work ... If someone can give a lead, an article or an example with curtains-react, it would be of great help to me!
https://www.haritos.co/
It's a infinity draggable slider and when you click on a image, you access to the project, is the raison why I use curtains-react.
I also wanted to use curtains-js in my project. While browsing I found this codepen which is kind of what you need although the click-through is not implemented.
https://codepen.io/AlainBarrios/pen/bXdzmR
It uses curtains-js instead of curtains-react but I think it should be easly convertable. Put the onRender function in the useCurtainsEvent and add event listeners for the draggable events.
useCurtainsEvent("onRender", (curtains) => {})
I would first make a draggable list in react and then add each event of the example one by one. Just remember that animations like these take a lof of time and will to get right :)
Let's say we have a tile grid with the follow behavior:
There's a button for adding a tile. The tile will decide if it should be a red or blue tile after some time thinking (1-3secs). The tile will be green while it's thinking what color it should be.
Clicking a title will remove the tile from the grid
Let tiles be an array of tile colors which will serve as the state of the tile grid and setTiles as the setter of that state. Given the grid behavior, setTiles should be called during these events:
on click of a tile. The clicked tile should be removed from tiles.
on click of the add button. A green tile must be added to tiles.
after a tile decides what it's color is. The corresponding green value in tiles must be changed to red or green.
I've prepared a codepen of a simple implementation of the grid detailed above. The issue with this is that calls to setTiles after an await statement overwrites state changes that happened between the start and end of the asynchronous statement. I think this is because the function only has reference to the state value before starting the async operation.
What's the best architecture (component changes, callback passing, tile data structure), using SFCs and the Hooks API, to avoid the unintended overwrites and, ultimately, the tile grid having an updated array of tile data at all times?
Solved it by using useReducer. Wasn't aware that with useReducer, you have a "synchronised" state for all dispatched actions. The state overwrite wasn't an issue with the seemingly-central state with reducers. Working code here.
I'm working on some sort of 'continuous' animation. Say a div translates from its current location 200px to the right. There's an option to change the distance of translation. While its animating, the user changes from 200px to 400px. The div should still move smoothly until it reaches its final point which is 400px from its previous location. I have done the basic moving animation, however I can't figure out how to make it continues without jumping when the distance changes.
Here's the codesandbox that I'm working on which best illustrates my point above and what I'm struggling with. Any ideas or help would be greatly appreciated. Thanks :))
Edit: Steps to reproduce the jumping problem:
Open the sandbox
Click the 'Toggle' button
Click the 'Add distance' button
While the red div animates, click 'Add distance' button again
And you should see the div jumping
There is probably a way to fix your code so that it works as you want, though I would suggest going in another direction. There are several animation libraries in React that can help you solve this problem. The resulting code is also going to be more portable.
For your specific need, I would suggest using a library called react-move. It is part of the react-tools which provides other cool libraries. I created a CodeSandbox with my take on your problem using react-move.
I only took the transform line for your code, since I wanted to focus on how you could integrate the library into your example.
To create the animation, I imported a component from react-move called Animate. It's the main component of the library. You use this component to wrap a function using the function as child pattern. This function will receive a state object with information regarding the animated element. It also consumes a start, update, enter, and leave function, that represents the state for those actions.
Inside you function as child function is where you define the animation. In our case, we want to translate the Box along its x axis, using the x value provided on the state object.
OBS: On my example the Box returns to the start (x === 0) when its offset value is bigger than the window's width.
I hope it helps.
When I open the item-accordion I have used the animation .But the item-accordion has the image that is wrap in the multiple row using display flex property of the CSS3. Whenever I open the accordion the extra content is displayed on the right during transition.So can anyone suggest what can be done to solve it?And this happens when width of the content is small
Another problem is i have used the animate-repeat animation to delete the item.But when i open the item-accordion the animation is applied to them also hence animating the image as a list.
.list .item-accordion {
-webkit-transition:0.09s all linear ;
transition: 0.09s all linear;
}
This is the animation I am using.
The demo of the code is over here:
http://plnkr.co/edit/FnQVCYrSGOlpk5wNxAZ6?p=preview
I have had similar issues when having to meet complex animation requirements. I have used greensock for more complex animations but that doesn't seem to be needed here. The general concept is that you are going to want to animate something but change/alter the properties before and after the animation has completed. You are going to have to be using a few callback promises to run additional animation after the first part of the animation has completed or do some manual calculations and adjust properties before starting or ending.
Angular Animate
Ionic Animate
It seems like ionic is allowing for onStart and onEnd callbacks. I would hide or force certain properties onStart and reset them onEnd so that you can get around what you are trying to work with. If you are not wanting to work with a fixed width or height you are going to have to grab window/screen size and so some basic calculations based on that. So you would get your window size set the size based on the window for the animation then reset back to auto when completed.
I have a tree panel and am trying to do an animated scroll to certain locations. I'm doing something like this:
myTreePanel.getView().getEl().scrollTo('top', yCoord, true /*animate*/);
The view scrolls to the correct location, but the "slider" in the scroll bar doesn't move. Any ideas why?
Some additional info: if I do the following instead, the scrollbar slider moves correctly (but of course scroll() doesn't support animation--I'd prefer to use .scrollTo() so the user can see the scrolling):
myTreePanel.getView().getEl().scroll('down', yDiff);
Thanks for any help/advice!
#MoleculeMan's suggestion of disabling the custom scrollbars (which ExtJS uses in 4.0.x but not in 4.1) does work. After doing this you can call myTreePanel.getView().getEl().scrollTo('top', yCoord, true) and everything works as expected: scrolling is animated and the scrollbar moves. The only problem is that it seems to break the ability for the view to scroll if you use the up/down arrow keys to move through the tree.
It's not very elegant, but the work-around I'm going to use is this:
// Animated scroll of tree view
myTreePanel.getView().getEl().scrollTo('top', yCoord, true);
// Wait 300ms then sync the scroll bar with the tree view
setTimeout(function() {
myTreePanel.setScrollTop(yCoord);
}, 300);
This has the cosmetic disadvantage of the scroll bar "jumping" into place instead of smoothly moving with the animation, but the benefit of not breaking the up/down key scrolling. Also, because it doesn't involve changing config params or overriding the tree view's style, I'm assuming it will still work once we upgrade to ExtJS 4.1 (i.e., the timer call to setScrollTop() will be unnecessary but shouldn't break anything).
Note that calling setScrollTop() moves the scrollbar, but also causes the view to "jump" to that position. You therefore need to ensure that the timer doesn't fire until after the animation finishes. I'm actually using some custom code to poll every 10ms and see if the destination row is visible, then calling setScrollTop(), instead of using a timer that always waits for some hard-coded amount of time:
var scrollToRowNum = 5;
var scrollToEl = getElementForNode(myTreePanel.getRootNode().childNodes[scrollToRowNum]);
var yCoord = scrollToEl.getOffsetsTo(scrollToEl.parent())[1];
// Animated scroll of tree view
myTreePanel.getView().getEl().scrollTo('top', yCoord, true);
// Check every 10ms to see if animation is done, then sync scrollbar
var timerId = setInterval(function() {
if( myTreePanel.isTreeElementWithinVisibleArea(scrollToEl) ) {
clearInterval(timerId);
myTreePanel.setScrollTop(yCoord);
}
}, 10);
The isTreeElementWithinVisibleArea() function just checks to see if element's current Y coordinate (absolute) is between the top and bottom of the tree view box.
Not surprising. They use their own scrollbar. The correct code would be:
myTreePanel.verticalScroller.setScrollTop(yCoord);
However, it doesn't support animation either. So I recommend to get rid of custom scrollbar as I've described here and use your original code.