I have been working with Visio lately and am used to the basic use of it, but am curious how you can build a 'moving' line in your drawing. Please see this link (and activate Lift A and/or B, C,D, E):
Picture to illustrate the idea
I don't understand what needs to be done to make the interrupted connector line to be moving like that. Anybody any idea?
The ability to build somewhat "live" diagrams was partially the reason for me to build that svgpublish visio extension... This particular effect for example is a simple CSS animation on a line.
svg:
<g id="liftA">
<path d="..a complex lift path here..." />
</g>
css:
.lift-on {
stroke-dasharray: 7 1;
stroke-dashoffset: 8;
stroke-width: 4px;
animation: marquee 1s linear infinite;
}
#keyframes marquee {
from { stroke-dashoffset: 8; }
to { stroke-dashoffset: 0; }
}
script:
// to turn on the lift:
document.getEelementById("liftA").classList.add('lift-on');
Visio diagram by itself is pretty much static unfortunately, the best I could think of is probably some sort of VBA timer animation.
Related
I'm using a css animation in my page which makes the element rotate on itself on Y axis:
#keyframes rotateony {
100% {
transform: perspective(120px) rotateY(0deg);
-webkit-transform: perspective(120px) rotateY(-360deg) ;
}
}
#testdiv {
animation: rotateony 2.4s infinite linear;
}
But my page is a little bit laggy on mobile and that's the only element animating and no background java is running. I'm trying to improve the whole page performance, I read that you need to target 60fps synchronicity, so I thought that by using
animation: rotateony 2.4s infinite steps(144); /*144 = 2.4*60 => 60fps) */
or
animation: rotateony 2.4s infinite steps(72); /*72 = 2.4*30 => 30fps */
I can force the browser to makes frames synchronous to the device refresh rate.
Is this something that can really improve the performance? Visually, I can't tell the difference between all 3 of them. How can I improve this animations performance? I tried to test it using chrome inspet devices with my smartphone, but chrome debugger makes the page laggy by itself and does not give a good estimate of the real frame rate.
I'm trying to use CSS to spin an SVG path and I can't get it working properly in Firefox.
Here are my styles:
path {
transform-origin: 50% 50%;
animation: spin 1s linear 0s infinite;
}
This works in Chrome but not Firefox. In Firefox, the animation works but the origin is relative to the SVG viewbox, not the path itself. I've learned that this is apparently correct, but why? Why do SVG paths behave differently than every other HTML element? It just seems counter intuitive.
The only alternative solution I've found is calculating the actual origin using the width and height of the viewbox and the width, height, x,and y coordinates of the path, and then using a fixed pixel value. While this works, it isn't nearly as convenient or practical as the Chrome solution. In fact, my path doesn't even have x or y attributes. It's position is described in the d attribute, so using this particular path, I'm not even sure how to make that calculation.
Is there a way to force Firefox to define the origin relative to the path, rather than the SVG? Perhaps a polyfill or something? I'd really like to accomplish this using the simple method that Chrome supports.
Why do SVG paths behave differently than every other HTML element?
Two reasons:
SVG elements are not HTML elements, and are not subject to the same rules.
The defined behaviour is consistent with the way percentage coordinates work elsewhere in SVGs.
A new property called transform-box has been proposed that will allow you to alter the behaviour of transform-origin for both HTML and SVG.
If and when browsers support this new property, you will be able to get behaviour that matches Chrome's current behaviour by using:
transform-box: fill;
FF has already implemented this, but it is not enabled by default yet (AFAIK).
For now, you will need to calculate the centre coordinates yourself. Or, alternatively, rearrange your SVG so that the path is centred on the origin and use a combination of transforms to do your rotation.
For example:
.mypath {
fill: red;
animation: spin 1s linear 0s infinite;
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
<svg width="400px" height="400px">
<g transform="translate(200,200)">
<!-- path centred on (0,0) -->
<path d="M -100,-100 L 100,-100 100,100 -100,100 Z" class="mypath"/>
</g>
</svg>
I can't figure out what's going on here.
I was updating a site that still had a marquee tag in use, so I replaced with a much smoother (though, still a marquee) css animation:
Problem is that it works fine in chrome and firefox, but is inconsistent in safari. Sometimes it loads, sometimes it doesn't. Also seems to not load more often when coming to the homepage via a link on the site vs a hard reload.
Is there anything loading that could interfere with the animation? Any ideas why it wouldn't work on some loads?
The page it's happening on is http://www.peacenow.com and the CSS I'm using is:
.marquee span {
position: absolute;
left: 0;
top: 0;
width: 7500px;
-webkit-animation: moveSlideshow 165s linear infinite;
}
#-webkit-keyframes moveSlideshow {
0% {
-webkit-transform: translate(0, 0);
}
100% {
-webkit-transform: translate(-100%, 0);
}
}
Try looking at Safari's methods for animation. Alternately I'd try using a more cross browser compatible method like jQuery.
jQuery is your best option if you take into consideration todays browser user-base, and compatibility between them. Look into jQuery .animate() for more information.
<script>
$('.marquee').marquee(); // The code to start a simple marquee in JavaScript's jQuery Marquee Plugin
</script>
and you'll need the jQuery and Marquee Plugins loaded by downloading them from jQuery and jQuery Marquee and then link them with <script src="/path/to/script.js"></script>
JSFiddle Example
P.S. This does work on my Androids 2.3 browser from 4 years ago where as the basic animation doesn't from your website. And let's face it, not many web surfers are actually sitting at a computer anymore.
I think there are two ways you can address this issue for Safari.
The first is using JavaScript to kickstart your animation.
Using Charles proxy, I manipulated the response so that this:
<p class="marquee" id="countries">
became this:
<p class="marquee-pre" id="countries">
Then, I injected the following JS at the bottom of the page:
<script>
$('.marquee-pre').attr('class', 'marquee');
</script>
which immediately addressed the issue.
If you don't mind adding JS to your page, I would recommend this approach.
If you can't add JS, or prefer not to, I found making the following change to the CSS animation also worked:
.marquee span {
-webkit-animation: moveSlideshow 165s linear infinite;
}
to:
.marquee span {
-webkit-animation: moveSlideshow 165s steps(10000) infinite;
}
While this works, I found it wasn't as "smooth" as using linear timing...
I'm trying to get an compass sass animation running with endless rotation. Thats working but at the end of each rotation the item seems to slow down a little bit (like easing) but there's no easing set by myself and in documentation any value is set to false. What could be the reason for tht problem?
This is my animation made with compass animate:
#include keyframes(rotation) {
0% {
#include transform(rotate(0deg));
}
100% {
#include transform(rotate(359deg));
}
}
The animation-timing-function CSS property is set to ease by default. To override this and make your animation smooth you'll need to set this property to linear where you're calling the animation:
animation-timing-function: linear;
Is there a way for Adobe Edge to output with only CSS3 so javascript doesnt have to be used? If not, is there something else I can use that can do this?
You can do simple animations with CSS3 only. MDN is a useful resource.
This is the basic syntax:
h1 {
-webkit-animation-duration: 5s;
-webkit-animation-name: colorchange;
}
#-webkit-keyframes colorchange {
0% {
color: #fff
}
100% {
color: #000
}
There are other editors out there. Edge is really not the ideal editor for a lot of applications. For one thing, it is pretty heavily reliant on Javascript. Entirely I believe. Edge, for me, seems more geared to non-flash animation with a more powerful api to control animations from the page.
Other editors to look at:
Sencha animator
Hype
Purple for Mac
Purple, in particular seems like a good one for css3. It has a good, simple interface that can import psd files. But it is mac only.