My animation is like small particles moving on a same Direction and looping. Some of the smallest particles makes a horizontal lines while moving only on safari browser. This never happens on other browsers.
Related
So I did an attack animation in the program Aseprite and everything was fine with the animation, but when I put in inside the animator in unity the character changes position.
Here's the images, first one is a gif with the animation running as I want, and then the before and after of the animation in Unity.
I know it's small but I hope you can see
This is because it's setting the center point at the location, and the gif is wider than the standard player image, you will need to offset to compensate.
So I just sliced the sprites again but with the pivot to the left instead of center, and then adjusted the Collider. It seems to work. Not sure if it's the perfect way though.
I'm animating a pair of dentures in Blender, where I'm having the camera move around them, and doing the tedious and imperfect work of setting many keyframes to keep the dentures perfectly filling up the view at all times (always touching the horizontal or vertical boundaries). Is there a better way?
When a page contains CSS3 animations that are below the fold, or that get hidden as the user scrolls down, should you apply a class using Javascript to stop the animation, or do browsers not animate invisible elements?
Even though browsers will not draw elements that are outside of the viewport I'm still pretty sure they will continue to update the css properties as determined by the css animation even when the element is not visible.
This is needed in order to be able to listen for animation events, or to be able to read the value of an animated css property at any given time.
So, in theory you might improve performance by removing the css class that animates the element, but unless you have very complex animations or animate hundreds of elements I wouldn't really worry about it.
"Drawing" is the most expensive part usually, especially if you're animating things such as colors, which causes a repaint. However, if you're animating a translation or rotation using a css transform the browser usually doesn't need to do a repaint each frame. Instead it can just paint the element once and send it to the GPU as a texure and let the GPU translate or rotate it each frame, which is crazy fast since it's all hardware accelerated.
I have a CANVAS element that can be quite wide, depending on the actual content. For printing I'd like chrome/firefox to automatically tile the canvas image across multiple pages (horizontally first, then vertically).
The vertical tiling works fine, the print preview splits the canvas across two pages.
There doesn't seem to be any horizontal tiling at all.
Any ideas?
The default printing will always cut the canvas off when it is too wide. No getting around that.
However...
Replacing the original canvas with small vertical slices of the original canvas allows the browser to page break at roughly the correct location.
I am trying to calculate the correct mouse coordinates, in user coordinate space, in an SVG document from within Javascript code when scrollbars come into existence when that SVG file is viewed from within FireFox. But it is not quite correct. This is needed to get SVG-based tooltips drawn correctly even when the SVG is scrolled horizontally or vertically.
I desire to have the coordinate transformations be correct across IE and Firefox browsers. Also, I want to do this with a single-source Javascript+SVG solution that hopefully does not require browser-specific conditional code. I am currently using FireFox 3.5.10, but I would consider upgrading to a more recent version of FireFox, and I have not tested IE yet.
The problem I ran into is the coordinate offsets for the scrollbars: The mouse coordinate transformation is not sufficient when scrollbars come into existence over the SVG element inside Firefox. As a debugging aid to figure out the coordinate transformations, I am working with a simple SVG file that contains Javascript handlers, all in one file, that simply draws crosshairs at the mouse cursor as SVG line objects. Find it posted at svg_cross_hairs.svg. If you load that file into FireFox and shorten the FireFox window down until scrollbars appear, and then scroll either the vertical or horizontal scrollbars, you will find that the crosshairs drawn by the Javascript are offset by the amount of either horizontal or vertical scrolling amount, which is not correct in order to draw a tooltip object on or near where the mouse cursor actually is.
I do see the Firefox: Get mouse coordinates of top-left corner of viewport question that talks about the scrollTop property.
msg#00056 clarifies that there is confusion of the meanings of element.{pageX,pageY,clientX,clientY} attributes and the element.getscreenCTM method.
Is there a cleaner way to arrive at the correct mouse coordinate, in the in user coordinate system?
You can use evt.pageX / evt.pageY or window.pageXOffset / window.pageYOffset to arrive at something that works even if the svg is scrolled.