Solved

Animate an object

Posted on 2013-06-15
12
267 Views
Last Modified: 2013-06-18
I have a text area where user can type content. I have an image of a big hammer beside the text area. When a user clicks on the submit button, I want the hammer to move and hit the text area and text area disappear.
I don't want flash. How can I do this?

I am using mvc3. Not sure whether jquery is the ideal tool or html5. some code samples will be appreciated.

Thanks.
0
Comment
Question by:Sirdots
  • 6
  • 3
  • 3
12 Comments
 
LVL 74

Expert Comment

by:käµfm³d 👽
ID: 39250051
Adapting the fiddle found here:


...you can achieve something like this (click the image to start):

<html>
    <head>
    	<script src="jquery-1.10.1.min.js"></script>
    </head>
    <body>
    	<textarea>Hello World!</textarea>
    	<img src="hammer.png"></img>
    	<script>
    		var degree = 0;
    		var timer;

			function rotateCCW($img) {
				$img.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
				$img.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});

				if (degree > -120) {
					timer = setTimeout(function() {
						--degree; rotateCCW($img);
					},5);
				}
				else {
					$('textarea').val('');
					rotateCW($img);
				}
			}

			function rotateCW($img) {
				$img.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
				$img.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});

				if (degree < 0) {
					timer = setTimeout(function() {
						++degree; rotateCW($img);
					},5);
				}
			}

    		$(document).ready(function () {
    			$('img').click(function () {
    				rotateCCW($(this));
    			});
    		});
    	</script>
    </body>
</html>

Open in new window


This won't work in every browser, though.
0
 
LVL 44

Expert Comment

by:AndyAinscow
ID: 39250054
Would an animated GIF be suitable ?  (The image contains all the images and shows them in sequence)
0
 
LVL 74

Expert Comment

by:käµfm³d 👽
ID: 39250060
@AndyAinscow

How would you prevent the image from being animated to start with? (What I gather the intent is here.)
0
 
LVL 44

Expert Comment

by:AndyAinscow
ID: 39250067
That is why I asked if one would be suitable.  (swap a static image with an animated image on button press?)
0
 
LVL 74

Expert Comment

by:käµfm³d 👽
ID: 39250073
Touché  = )
0
 

Author Comment

by:Sirdots
ID: 39250128
Thanks for your comments everyone. Kaufmed - the code you provided does not run. What do I do?
0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 74

Expert Comment

by:käµfm³d 👽
ID: 39250155
What browser are you using? I was working in Opera. Chrome should work as well. I cannot speak for IE. Also, you'd need an image file. I was using the attached.

Image
0
 

Author Comment

by:Sirdots
ID: 39250182
Thanks. I changed the head script to this

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

I used a hammer image and tried chrome,IE and firefox but still no luck. I will continue to troubleshoot.
0
 
LVL 74

Expert Comment

by:käµfm³d 👽
ID: 39250758
Honestly, the animation itself is kind of slow. You might consider using Andy's approach for a better user experience and better browser compatibility.
0
 

Author Comment

by:Sirdots
ID: 39251391
Thanks AndyAinscow. How do I do the animated GIF?
0
 
LVL 74

Assisted Solution

by:käµfm³d 👽
käµfm³d   👽 earned 250 total points
ID: 39252035
You can download GIMP and then review this video:  http://www.youtube.com/watch?v=f-9_HwRcd1A . If you already have Photoshop installed, I believe you can create animaged GIFs with it, but I don't have any experience with that tool, so I cannot advise how you would go about it. Whichever route you choose, be sure to save a copy of your first frame as a single image. That would become the "static" image that Andy referred to. Then the animated GIF would be swapped in via JQuery when you want the animation to occur.
0
 
LVL 44

Accepted Solution

by:
AndyAinscow earned 250 total points
ID: 39252267
To do the animated gif you require some sort of editor to create one.  I've no experience with any so I'll suggest you try the one kaufmed suggests.

Before you go to far that way.  I made a suggestion.  It might be suitable but equally well it might not.  I would suggest you download some animated gif first and test that you can do everything you require on all the browsers you want to target.  Then, and only then, when everything works do you create the gif you want to use.
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

Exception Handling is in the core of any application that is able to dignify its name. In this article, I'll guide you through the process of writing a DRY (Don't Repeat Yourself) Exception Handling mechanism, using Aspect Oriented Programming.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now