giniedp / spritespin Goto Github PK
View Code? Open in Web Editor NEWjQuery plugin for spriteanimation.
Home Page: http://giniedp.github.com/spritespin/
License: MIT License
jQuery plugin for spriteanimation.
Home Page: http://giniedp.github.com/spritespin/
License: MIT License
Hi,
I tried the
http://spritespin.ginie.eu/examples.html#fullscreen.html
example, and I noticed that the image get stretched when activating full screen...
Is it possible to maintain aspect ratio of the image when going in full screen mode?
thank you
Maurice
Hi @giniedp ,
I am using sprite spin plugin in reactjs for 360 degree view of images. So the markup is basically split into various react components.
So I have a parent component which calls another child component that loads sprite spin in its div with a set of images. When we move to another view via state change, i render a new parent component which internally calls another child component which initialises the sprite spin plugin with a new array of images. Although, the images get loaded in the network, the canvas is not getting generated and if I try to access the api or data object it is undefined.
Although i destroy spritespin before initialising the second time, it seems like the older instance is not getting destroyed.
Is there any reason why this could happen? I even destroy the spritespin before initialising it the second time in the second view but still it does not work.
However, If I directly reload the 2nd view, the spritespin plugin gets initialised properly and the canvas gets rendered with the images.
Can you please provide me some ideas around why this could happen or as to what I am missing out. It would really be of great help if you could provide me with some insight around this.
Thanks.
Hello I really like this script but I have some problems with it. Firstly it works perfect on th deesktop on chrome browser. I only have problem when I display it on the mobile. I'm currently developping an app with phonegap (framework based on html, css and javascript) and I'm facing some problems when displaying the sprite:
this is my code:
$(".win-animation").spritespin({
source : "img/mmmm.png", // path to sprite sheet
width : 200, // width in pixels of the window/frame
height : 163, // height in pixels of the window/frame
frames : 14, // total number of frames
framesX : 5, // number of frames in one row inside the spritesheet
frameTime: 60,
behavior: 'drag'
});
This is a video I made showing my problems on desktop and on the phone:
https://www.youtube.com/watch?v=fORpKF9edQc&list=UUcGZQ1LZBPIeDTvnv1y6RnA
I have a pretty big spritesheet and I would like to use canvas as in spritespin script so it'll run fast also on mobile devices.
Any help is appreciated!
Option preloadCount
does not work as expected. Spritespin returns the whole set of images instead of preloading a subset and then call each individual frame on a draw
event, which I imagine must be the use of this option.
My initialization:
$('.spritespin').spritespin({
source: SpriteSpin.sourceArray("path/{frame}.png", {
frame: [0, 120],
digits: -1,
}),
width: 400,
height: 400,
sense: -1,
sizeMode: "fit",
preloadCount: 10,
plugins: [
'zoom',
'360',
'drag'
]
});
Is there method to start or stop animation interactively?
I'm running into a bit of a problem where as the plugin initialises, it loads all the images but then locks up the browser and I can't scroll until it's updated the DOM and injected the spritespin-stage
and spritespin-canvas
elements. Other elements that animate (in or out of viewport) also freeze in the last DOM update state.
I have 225 frames, each ~53kb so a total of about 12mb. Given the weight, i'm not initialising the instance on page load, but waiting until the user has reached it near enough. I've notice that it doesn't happen, or isn't as noticeable if I reduce the number of frames. but it still happens. It happens regardless of whether i init on page load, or on scroll.
I also don't have a visible loading indicator (not by choice - side question: how do I get this in there?) and could this be part of the problem?
Have you experienced this before, and if so what would be the best method to stop it occurring, or debug why the SpriteSpin is locking up the browser when the new markup is being injected.
I removed te drag behavior but the animation is still draggable. How to disbale this effect??
It seems by default you bind to the event mousewheel
:
spritespin/src/core/constants.ts
Line 20 in 0153d2e
This is a non-standard event; according to MDN
This interface is non-standard and deprecated. It was used in non-Gecko browsers only. Instead use the standard wheel event.
Instead you should be binding to just wheel
to ensure browser compatibility.
I do not believe anything in the core library or core plugins uses this handler, so it shouldn't be a breaking change. For backwards compatibility we can bind to both mousewheel
and wheel
.
Would it also be possible to change the behaviour from Drag to Scroll?
the canvas element does not include any retina support at the moment neither is it easy to get the whole thing responsive.
bind() and unbind() have been deprecated.
But a very quick replace with their substitutes on() & off() seems to work fine in my limited testing.
(Welcome to PR if you don't mind losing compatibility pre $1.7)
jurassicworldevolution.com/research -> example
Hi,
The wrapLane parameter doesn't work because it is not considered in Spin.updateFrame()
function around line 401, the case lane in not undefined should be:
if (lane !== undefined){
data.lane = lane;
if (data.wrapLane){
data.lane = wrap(data.lane, 0, data.lanes - 1, data.lanes);
} else {
data.lane = clamp(data.lane, 0, data.lanes - 1);
}
}
Regards
It seems that it spins back to the initial frame, which may not be very far at all.
Is this a bug? Is there a way to work around this?
Hi,
Your code is excellent and its is very useful in our project but now I had a requirements from my client they need 360 view product with color switching is there are possibility to switch another color image and that also will be 360 view.
Thank you
onProgress: function (a, p) { console.log(p.total); // returns undefined console.log(p.loaded); //returns undefined console.log(p.percent); //returns undefined }
Gday,
Thanks for the plugin, it's doing a good job of creating the primary interaction i'm looking for, however i'm looking for a method to trigger the instance to spin all the way back to frame 1. Animate is set to false by default because I don't want it auto spinning.
If there is no 'spin to' method, is there a simple way I could start the auto animate
process again?
The scenario I am trying to replicate is this:
Hi guys, thank you very much for this amazing plugin but unfortunately I cannot launch it successfully.
I get this weird error: Uncaught Error: No module found with name drag
For reference, here is my index.html:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="javascript/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="javascript/spritespin.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>
Spritesheet viewer
</title>
</head>
<body>
<div id='mySpriteSpin'/>
</body>
<script type='text/javascript'>
$("#mySpriteSpin").spritespin({
source : "sprites/arc.jpeg", // path to sprite sheet
width : 320, // width in pixels of the window/frame
height : 320, // height in pixels of the window/frame
frames : 16, // total number of frames
framesX : 16 // number of frames in one row inside the spritesheet
});
</script>
Would be very happy to get some help on this one ;-)
Thanks again.
For some reason, on Chrome iOS (latest version of iOS tested), the sprite sheet spin version doesn't work. It just tends to show the first frame but not actually spin. On your site, the image doesnt load at all.
data.frames defaults to 2 even though the source has over 30+ images in IE 8.
We are using png that have transparent parts. When viewing it in older Android browsers (i.e. Android 4.3), the first frame stays visible during animation.
Here is an example script: http://jsfiddle.net/takondi/bLcepjbu/
And here an example screenshot: https://drive.google.com/file/d/0B_Qkr4yLh_fjbDlRemhsajRPc3M/view?usp=sharing
Do you have any idea why this could happen and how to avoid it?
I have encountered an issue that if the image frames are of bigger size (let's say 200KB per image), and if there are 30 images to load inside the spritespin source, it will really take some time to finally see the images appear on the webpage. So I am wondering is it possible the webpage will load the first frame image, so we can see the image appears then it load all the remaining. (like the browser finishes rendering the first image with the DOM, then start to load the other images to append into the DOM).
Thanks
This plugin not working with png images.
if wie have only one image at source, the canvas is empty...
I fill the source by PHP and sometimes only one image is displayed.
If I have a spritespin element (regardless if it's a img-sprite or a canvas) I cannot scroll on touch devices if I scroll over the element. All touch events just going into the spritespin. But that is not necessary, if the sprite is just horizontally moved. Can you please provide touchscrolling vertically and do not catch these events if not necessary?
Hi, we are using this spritespin to show a set of images on iPhone. It works perfect to have a 360 degree view when we scroll left/right on the phone screen. But right now we want to zoom in/out and spin the images, is it possible for spritespin to achieve this kind of effects?
PS, we have tried the plugin of zoom, but it only zoom in the ONLY image which you double clicked, can not spin this set of images any more under this situation.
Thanks a lot in advance for any kind instructions.
I observed that the playto function animates to the instance of corresponding frame number, i am using spritespin 3D View and want to playto a corresponding frame and lane number combination, how to achieve the same?
Hi,
after loading, we see one animation around 360 degree and the stop it - fine...
It´s possible to start the small animation again?
$("#mmSpriteSpin").spritespin({
// path to the source images.
source: <?= $strPaths ?>,
width: 400, // width in pixels of the window/frame
height: 400, // height in pixels of the window/frame
loop: false, // If true loops the animation
sense: -1 // Interaction sensitivity used by behavior implementations
})
// eg
$('#myAnimateButton').click({function()
$("#mmSpriteSpin").spritespin({countAnimations: 1}); //Number set the number of "rounds"
});
I have a little problem and I can't figure out what's going on. Everything works well on desktop but when I try to load the page on an iPhone, the plugin is not loading.
Here is the error I got :
IndexSizeError: DOM Exception 1: Index or size was negative, or greater than the allowed value.
Here is the link :
http://dev.nwseatcovers.com/en/seat-covers/oe-series/original-equipment
Anyone got an idea ??
Thanks!
I am using this library on a project of mine, it looks awesome ! Any ideas to make this plugin responsive ? I would be happy to work on it but I am having trouble to imagine how I could do that....
Hello, I had a problem with IE8 again, only the first image is loaded.
Because in the load()
function in the for
line 151 to 157, the first image finish loading before pushing the next into images
. So the completness test line 146:
if (!completed && (count >= (targetCount || images.length)) && firstLoaded && (typeof opts.complete === 'function')) {
thinks that every images have be loaded (if targetCount
is not set).
Here images.length
should be replaced by src.length
to make sure we have the real count of images:
if (!completed && (count >= (targetCount || src.length)) && firstLoaded && (typeof opts.complete === 'function')) {
Regards
Hi,
I achieved my requirement with your last suggestion (Switching color in 360 degree view) #38
Now I need Hotspot over the image like this https://www.ajax-zoom.com/examples/example33_clean.php is there anyway/option exisit to achieve?
Thank you for your help.
Is there a callback function for the API playTo method? Would be useful if you want to animate sprite and then do anything after.
If there is nothing like that right now, please consider that a feature request :)
I can see that spritespin can depend on Zepto instead of jQuery. Do you have a list of required zepto modules? It looks like bower-installed zepto is not enough for spritespin to work. Adding zepto-data fixes the problem.
My project has no other jQuery dependency than spritespin and I'd like to have as lightweight solution as possible.
Hello @giniedp ,
I am the member of cdnjs project.
We want to host this library.
But there is a question want to ask.
I think the main file are release/spritespin.js
and release/spritespin.min.js
on github.
But I am not sure does there any dependency files need to be grab under src/
?
Or any other files need to be grab.
Please help me confirm that.
Thanks!
Hello, I had an issue on IE 8. It concerns images.indexOf(this)
line 139, because IE8 does not support indexOf()
on Array
.
I workaround it by defining the function, as said on http://stackoverflow.com/questions/3629183/why-doesnt-indexof-work-on-an-array-ie8
Hi!
I have used the images with 3040px x 3040px in the div which are 'width: 30%'.
I have used the "sizeMode: 'fit'" or 'stretch' or 'fill', it seems does not work.
What am I wrong with it?
Thanks.
We at VersionEye are working hard to keep up the quality of the bower's registry.
We just finished our initial analysis of the quality of the Bower.io registry:
7530 - registered packages, 224 of them doesnt exists anymore;
We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).
Sadly, your library giniedp/spritespin
is one of them.
Can you spare 15 minutes to help us to make Bower better?
Just add a new file bower.json
and change attributes.
{
"name": "giniedp/spritespin",
"version": "1.0.0",
"main": "path/to/main.css",
"description": "please add it",
"license": "Eclipse",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"<dependency_name>": "<semantic_version>",
"<dependency_name>": "<Local_folder>",
"<dependency_name>": "<package>"
},
"devDependencies": {
"<test-framework-name>": "<version>"
}
}
Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.
NB! Please validate your bower.json with jsonlint before commiting your updates.
Thank you!
Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!
Hello.
We use SpriteSpin to show a 360 degrees view of a car. And we have some strange troubles in webkit-based browsers. SpriteSpin works, but with some lags while dragging the canvas. I've recorded a screencast, here's a link.
http://screencast-o-matic.com/watch/cDj6QIi7hj
And here's a link to website where we use the plugin: http://www.hyundai.ru/configurator/car?compl_id=298&packets=
Can you offer us something to solve this problem?
Thank you.
It would be a nice option to have! At least for me :)
Hello. I think it would be great if we can change particular frame source through SpriteSpin instance without re-initialization.
My current solution:
SpriteSpin.extendApi({
replaceSourceFrame: function(src, frame){
frame = frame || this.data.frame;
this.data.source[frame] = src;
SpriteSpin.create(this.data);
}
});
Maybe You can offer more elegant solution for this?
Thank you.
It looks like the click behavior does not use the api correctly on line https://github.com/giniedp/spritespin/blob/master/src/spritespin.beh-click.js#L18. There is an error being thrown.
Currently
$this.spritespin("next");
Correct?
$this.spritespin("api").nextFrame();
Hi,
I am using sprite spin in react js for implementing 360 deg view. I dynamically load an svg at every breakpoint when next is clicked. Currently the svg gets loaded immediately after next is clicked. What I would want is to load the svg after the frame stops at an image.
@giniedp . is there is any event when the rotation ends, so I could load svg when it stops at a frame.
Thanks!
In order to make it work in jQuery 1.4.4, I had to remove line 41:
.on('selectstart', false);
Is there a possible within spritespin.js plugin to disable the right mouse click and middle mouse-wheel click?
I tested using my spritesheets to reproduce the issue on your site by changing the source value on your examples page, "http://spritespin.ginie.eu/samples/#/basics-spritesheet".
I can confirm I reproduced the issue.
I managed to fix the issue by reducing the total resolution of the spritesheet from 8960x4680 to 4480x2340.
I've included links to the two spritesheets so you can confirm the issue yourself, both sprite sheets have a total of 180 frames on 14 columns.
https://www.jurassicworldevolution.com/files/360-sprites/pachycephalosaurus_spritesheet.jpg - Not Working.
Hope this helps, and let me know if you need any more information.
Testing our implementation on a mobile device (iphones, androids and ipads) has revealed that touch performance is really sluggish and not smooth as is shown (on mobile) in the demo. The ipad is better than the phones, but still not smooth. This isn't ideal and we would like to smooth this out so it responds in sync with the touch action as the demo on your website does.
Are you aware of any settings, or limitations that touch devices have with the plugin that could slow down it's touch performance, and how I can smooth it out?
Our implementation uses 180 frames at roughly ~60kb for frame file size, and the below setup
$('#my-id').spritespin({
source: SpriteSpin.sourceArray('./img/path/to/asset_{frame}.jpg', {
frame: [0, 179],
digits: 3
}),
animate: false,
detectSubsampling: false,
width: 1600,
height: 1040,
frame: 1,
sense: 1
});
Extending on this, reducing the number of frames down to 25 has no difference, the same with setting detectSubsampling: true
.
Unfortunately I can't share a demo url as this project is under NDA, but there' is nothing fancy about our implementation, what you see above is
When i use fancybox on site and try init spritespin then i have this error in console:
TypeError: self.instance.$refs is undefined
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.